How to create rounded and circular images with CSS?

Rounded Images with CSS: In this tutorial, we will learn how to create rounded and circular images with CSS? By Apurva Mathur Last updated : July 26, 2023

Images are used for all kinds of reasons: to enhance websites, to illustrate stories, in ad displays, to present products or services, as stand-alone "a picture is worth a thousand words" meaning-rich tools, and sure, on social media. That is why it's imperative to use appropriate images on your web page; moreover, it's important to reduce the size of an image as low as you can before using them on your webpage as it will help decrease the loading time of the page. We have seen on many WebPages that the images are uploaded in different shapes, have you wondered how a square image is turned into various shapes.

Creating rounded and circular images with CSS

To create rounded and circular images, you can use CSS border-radius property by specifying the different values to get it the design/shape that you like with the images. This property simply curves the edges.

Syntax

The following syntax can be used to create rounded and circular images:

border-radius: (value %);

Example to create rounded and circular images with CSS

In this example, we are creating multiple rounded and circular images with different values of CSS border-radius property.

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         .image_1 {
         border-radius: 50%;
         width: 300px;
         height: 300px;
         }
         .image_2 {
         border-radius: 25%;
         width: 300px;
         height: 300px;
         margin-right: 20px;
         }
         .image_2 {
         border-radius: 35%;
         width: 300px;
         height: 300px;
         margin-right: 20px;
         }
         .image_3{
         border-radius: 20%;
         width: 300px;
         height: 300px;
         margin-right: 20px;
         }
         .image_4{
         border-radius: 5%;
         width: 300px;
         height: 300px;
         }
      </style>
   </head>
   <body>
      <img class="image_1" src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0">
      <img class="image_2" src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0">
      <img class="image_3" src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0">
      <img class="image_4" src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0">
   </body>
</html>

The output of the above example is:

Explanation

In the above code, the only border-radius property is applied on all four images, I've tried to explain how different values change the images. The first picture has border-radius:50%, which has turned the image fully rounded, whereas other values show little effect on the image. You can change the values as per your desires. The maximum value which can be used here is 50%, and the minimum value is 1% which will just slightly turn the corners of the image, You can also use the px unit.

CSS Examples »

How to align images side by side with CSS?

How filter property works in CSS?