How to display an Image in Circular Shape using CSS?

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

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.

img {
    width: 250px;
    border-radius: 50%;
}

Example

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

index.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.

Conclusion

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