Rounded images with CSS 3

border-radius property of CSS 3 is the magic which made internet less squared. This property can be applied to any element to give it rounded corners. Yet, in practice the border-radius is most used on images to make them full rounded.

All you need to do in order to give a image a round appearance is apply the border-radius property with a value equals to 50%:

It is obviously, but I will mention anyway, to obtain a perfectly round image you must have am image with equal height an width – otherwise you will end up with an elliptic image.

My prefer style for a round image is as follow:

The image is defined as:

And it looks like the following:

Check here the list of browsers in which the border-radius property works.

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply