How to round the edges of an image with CSS

While at work today I needed to round the edges of an image using CSS, as in the image itself is square.

I quickly browsed the web because I, for some reason, assumed that border-radius wouldn’t work. A lot of examples on how to round the edges of an image mention putting a div around the image you want to round and set a border-radius on that image.

I thought that this seemed a bit more complicated than the task was so I tried setting border-radius directly on the image and it worked perfectly!

Here’s exactly what I did.

I had an image sitting within a div with a class of “countrytext”, so I simply created a new style in my style sheet for .countrytext img and set the borders.

 

Here is what the image looked like before being styled:

 

 

 

 

 

 

 

Here is what it looked like afterwards:

 

 

 

 

 

 

 

And here is the CSS I used:

.countrytext img { 
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *

This site uses Akismet to reduce spam. Learn how your comment data is processed.