How to create round images with CSS

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

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

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>