CSS: images and border-radius

The border-radius CSS property can actually be applied to images, but only when certain conditions are met. First, this property can be applied to any element, but images are replaced elements, meaning that their content is fetched from an external resource. Since the border-radius property applies to the border edge of an element (according to the CSS box model), you cannot apply this property to an image when the border edge of an image overlaps the content edge of such image. So in order to apply this property to images, you have to create a certain distance between the border edge and the content edge of images. For example, you can use padding for that purpose:

#gallery img {
 float: left;
 width: 120px;
 height: 100px;
 padding: 8px;
 background: #fff;
 -moz-border-radius: 8px;
 border-radius: 8px;
 margin-right: 12px;
 border: 1px solid;
}

Now there's a certain amount of space between the content of the image and its border edge. You can see a demo below.

Demo

Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.