How to Draw a Circle Around an Image in CSS?

The simplest solution to draw a circle around an image in CSS is to use the border-radius property in combination with the border property.

All you need to do is set a normal border around the image and then simply set its border-radius to 50%. Setting the border-radius to 50% will automatically convert the image into a circular image.

However, only setting the border-radius to 50% does not guarantee that the image would become a perfect circle. This depends on the dimensions of the image.

If the width and height of the image are equal, it would result in a perfect circle. Otherwise, it would result in an ellipse.

See the following example where we have drawn a 5px red border around the image:

cat

Example:

img{
   width: 250px;
   height: 250px;
   border-radius: 50%;
   border: 5px solid red;
}

You can also add a little space between the image and its border which will make the image look more beautiful. To do that you have to simply apply some padding to the image.

See the following example where we have set a gap of 5px between the image and its border using the padding property:

cat

Example:

img{
   width: 250px;
   height: 250px;
   border-radius: 50%;
   border: 5px solid red;
   padding: 5px;
}

As I previously said, if the width and height of the image are not the same and we set its border-radius to 50%, it would not result in a perfect circle. Rather it would become an ellipse.

See the following example:

cat

Example:

img{
   width: 250px;
   height: 170px;
   border-radius: 50%;
   border: 5px solid red;
   padding: 5px;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts