CSS – Display Image as a Circle

To display image as a circle using CSS,

  • Set width and height properties for image with same CSS length value. Refer CSS Length Units.
  • Set border-radius property with a value of 50%. Refer CSS border-radius tutorial.
  • Set object-fit property with the value cover, to make sure that image is not distorted when width and height are different for source image.

A quick syntax to display image as a circle is

</>
Copy
img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
}


If image is of square shape (height == width), then there is not need to specify object-fit property.

</>
Copy
img {
    width: 250px;
    border-radius: 50%;
}

Example

In the following example, we display an image in circular shape using CSS.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img {
            width: 250px;
            height: 250px;
            object-fit: cover;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="/sample_image.jpg">
</body>
</html>

If the image is already a square shaped one, meaning having an aspect ratio of 1:1, then there is not need to specify height and object-fit properties.

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img {
            width: 250px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="/sample_image_square.jpg">
</body>
</html>

Conclusion

In this CSS Tutorial, we learned how to display an image in circular shape, with CSS examples.