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

Exapmle

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://www.mishelshaji.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://www.mishelshaji.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://www.mishelshaji.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.