Code Tip #2 - Rounded borders on images in CSS3 without putting them in background (or using overflow:hidden;)

It's been a long time coming, but this is our second coding offering. It was discovered after trawling through the internet and not finding quite the right solution for a problem.

The scenario is a familiar one. You want to add a rounded border and perhaps a drop shadow to an image, but the required CSS3 isn't supported in all browsers.

There are a number of solutions out there that put the image in the background to solve the problem, but our images were part of the page content and we wanted them to be easily available for printing. Another solution uses overflow:hidden;, but we found that was not reliable across all browsers.

The Problem

Just to recap, this is the code that we would expect to be supported, but isn't:

    .image_rounded_shadow {
        margin: 5px 5px 5px 5px;
        padding: 10px 10px 10px 10px;
        border: solid 1px #BDBED9;
        background-color:#F5F5F8;
        box-shadow: 1px 1px 6px #888888;
        -webkit-box-shadow: 1px 1px 6px #888888;
        -moz-box-shadow: 1px 1px 6px #888888;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
    }  

    <img class="image_rounded_shadow" src="[Your Image]"/>

Which produces the following result:

The Solution

After trying a number of solutions suggested on-line, we hit upon using a span and effectively applying the border-radius twice, which seemed to work nicely.

    .image_rounded_shadow {
        display: inline-block;
        margin: 5px 5px 5px 5px;
        padding: 10px 10px 10px 10px;
        border: solid 1px #BDBED9;
        background-color:#F5F5F8;
        box-shadow: 1px 1px 6px #888888;
        -webkit-box-shadow: 1px 1px 6px #888888;
        -moz-box-shadow: 1px 1px 6px #888888;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
    }

    .image_rounded_shadow img {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
    }

    <span class="image_rounded_shadow"><img src="[Your Image]"/></span>

Which produces the desired result:

Notes

Take note that the border-radius for the img tag is smaller in relation to the border-radius being applied to the span. You will need to experiment if you wish to use a different radius.

No doubt, this post will not be relevant forever as browsers catch up, but for now this appears to work in IE, Firefox, Opera, Chrome, Safari and all the mobile browsers we tried.

Questions

If it works for you, spread the word and perhaps add a link somewhere back to this page.

If you have any questions, submit them below, but please make sure you've read the whole post before asking for assistance.

For Interest

The building pictured is Angkor Wat (minus scaffolding) in Cambodia, probably one of the most impressive driveways in the world.