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.
.jpg)
