CSS3 Rounded Images Without Clipping

Have you ever tried to style an image in CSS3 with a border radius of anything except 0? If you have you may have noticed that the image clips outside of the container, which looks absolutely horrible! The desired effect would be for the image to sit below the border and clip underneath so it looks like the image has a nice rounded corner. However, because of this (Firefox?) bug, the desired effect cannot be achieved this way.

However, there is a workaround! (Actually there's a couple, but this is the easiest.) It requires a minimal amount of extra markup in the form of a span element wrapped around the img so that the markup you end up with looks something like:

<span>
    <img src="" alt="" />
</span>

All you need to do to get the effect working properly is stop the image from the image tag appearing and set the background image of the span to the same href. So for example, if your image was located at http://www.yourdomain.com/images/test.jpg your code would look something like:

<span style="background: url(http://www.yourdomain.com/images/test.jpg) no-repeat;">
    <img src="http://www.yourdomain.com/images/test.jpg" alt="Test Image" style="opacity:0" />
</span>

As you can see we have hidden the original image with opacity (which allows it to be selectable as an image, but not visible as an element) and set the background image of the span to the same image (making sure not to repeat it if there is a blog set somewhere). Because the dimensions are the same we don't need to worry about setting a size and/or width on the span as it will automatically expand to fit the image tag inside (unless you have floats/displays set, in which case you may need some extra styling).

This allows you to be able to add rounded drop-shadows, or inset shadows to your images too. You can see examples of this here. At this link you can also find a nice little jQuery script that automatically adds the span and background styles to any image with a given class so you don't have to add markup. But this obviously requires JavaScript and won't degrade to look great!

If you just want to go straight to an example click below:

Webdesigner Wall