How to round an image in CSS?

Rounded images are a great way to break up the monotony of straight lines and sharp corners. They can also help draw the eye to important content on your page. Learn how to round your images using CSS, how rounding works underneath, and take your design to the next level.

How to round an image in CSS?

To round an image you need to use border-radius CSS rule, with the appropriate value, depending on how much you want to round the images. To add some small rounding on each corner of the image you can use below piece of code:

<img src="http://placekitten.com/300/300" alt="Kitty" />

img {
	border-radius: 5%;
}

To round an image, you can use both percentage and pixel value.

How to create a circle from an image?

If you want to create a fully-rounded image you need to increase the border-radius value to 50% of it’s width or height:

img {
	border-radius: 50%;
}

How to round only one corner of an image?

Previously used border-radius CSS rule rounds all four corners of an image. To round only one corner, you need to use one from below, more specific rules:

img {
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;
}

How rounding an image with border-radius works?

The value passed to border-radius directive denotes the size of the circle radius, which is drawn on each corner of the rounded element. Based on this circle, the element is cropped at the corner. Below image helps you to visualize this process (green line is the circle radius, which length is passed to border-radius rule).

Now, you are able to round an image in CSS and take your designs to the next level 😉