How to create round images with CSS

This tutorial will show you how to create round images with CSS ( Cascading Style Sheet ) and HTML markup for your web pages.

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

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.


Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.