How to create round images with CSS
HTML CSS

How to create round images with CSS

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

This tutorial will show you how to create round images with CSS and HTML.

Creating a simple round image

To create a round image, we’ll set the border-radius property to 50%.

Example 1 – Creating a simple round image

<!DOCTYPE html>
<html>
<head>
    <title>CSS round images</title>
    <style>
        .round-image{
            height:150px;
            width:150px;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <img src="https://static.geekinsta.com/wp-content/uploads/2018/10/bg_img_01.jpg" alt="image failed to load" class="round-image">
</body>
</html>

Output

image failed to load

Example 2 - Creating a round image with hover effects

<!DOCTYPE html>
<html>
<head>
    <title>CSS round images</title>
    <style>
        .round-image{
            height:150px;
            width:150px;
            border-radius:50%;
            border-style:solid;
            border-color:#535353;
            border-width:5px;
        }
        .round-image:hover{
            border-radius:20%;
            transition-duration:1s;
        }
    </style>
</head>
<body>
    <img src="https://static.geekinsta.com/wp-content/uploads/2018/10/bg_img_01.jpg" alt="image failed to load" class="round-image">
</body>
</html>

Output

image failed to load

Hover the image to see the effect.

Example 3 - Round image will rolling effect

<!DOCTYPE html>
<html>
<head>
    <title>CSS round images</title>
    <style>
        .round-image{
            height:150px;
            width:150px;
            border-radius:50%;
            border-style:solid;
            border-color:#535353;
            border-width:5px;
        }
        .round-image:hover{
            border-radius:10%;
            transform: rotate(720deg);
            transition-duration:1s;
        }
    </style>
</head>
<body>
    <img src="https://static.geekinsta.com/wp-content/uploads/2018/10/bg_img_01.jpg" alt="image failed to load" class="round-image">
</body>
</html>

Output

image failed to load

Hover or tap on the image to see the effect.