The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn't display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically.
Goal
My goal to use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot below.
Problem
The problem is none of the modern browsers display rounded corners image the way I want it. Webkit does display the rounded corners, but the inset box shadow is not supported. In Firefox, the border-radius doesn't even display at all.
The CSS Trick
The trick is very simple: wrap a span tag around the image element. Specify the original image as background-image. To hide the original image, specify opacity:0 or display:none. I find using the opacity method is a better approach because the image will remain available for copy or download.
Final Solution With jQuery
To make things easier, we can use jQuery to automatically wrap a span tag around the image.
The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) and wrap it with a span tag. The script finds the src, width, height, and CSS class attribute of the original image and apply them as inline styling in the span tag. Then it specifies the opacity of the image to 0 to hide it.
It works with any image dimension (with or without the width and height attribute). It can also be combined with other CSS classes. No additional markup is required.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rounded-img, .rounded-img2").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>
Sample Usage
I hope you will find this trick useful. For example, you can use it to style your blog's avatar or profile photos.
Credits
Thanks to Darcy Clarke for the jQuery code.
Very cool! Thanks for sharing.
Using jQuery to accomplish something that…. umm.. trivial in CSS and HTML seems like a poor idea.
Just looking at the before code (the html) and the after (the jQuery) is revealing enough. You’re now using 3x as much code, and you’re going to give all your users a flash of unstyled text.
:(
Did you try this?
-moz-border-radius: 5px;
I really like this, but it’s a pity that win chrome can not correctly display this.
A very nice sollution. I was looking for something like this last week but I opted for masking the corners with png’s instead. Will try this one out next time though!
very useful article. I haven’t thought about making a corner for the image will need to go a way like you said. I thought it will be the same with the border.
Too bad it’s not cross browser… Not working in any ie…
awesome trick! nice work.
This is very nice, but what about IE6?
The CSS version works for me in the latest (stable) release of Firefox, aswell as the IE9 Testdrive tool. The jQuery example doesnt work at all in the IE9 Preview tool, and does not have rounded corners in Firefox. I’m viewing on Windows 7 64.
its really useful article, thanks share this nice & informative stuff
really helping techniques you sharing in this article. thanks
Hi! I’m having a problem when the span tag wraps the img the img goes small (like 1 text line height) why is that happening?
discovered: add a “display:block;” at the span style and it works ;D
Instead of sharp corner, rounded corner appeals more. I have ported the code to work in prototypejs
document.observe(“dom:loaded”, function() {
$$(“.rounded-img”).each(function(tgt) {
if (Prototype.Browser.IE) {
tgt.src = “roundhandler.ashx?f=” + tgt.src + “&c=888″;
} else {
tgt.setOpacity(0).wrap(new Element(‘span’).addClassName(tgt.getAttribute(‘class’)).setStyle({
‘width’: tgt.width + ‘px’,
‘height’: tgt.height + ‘px’,
‘background’: ‘url(‘ + tgt.getAttribute(‘src’) + ‘) no-repeat center center’
}));
}
});
});
For IE, I am using a http handler to make the image rounded. If you would like to see it in action, you can go to this location
http://nazmulweb.com/site5/demo/rc/
Thank you so much for sharing such a creative idea.
Nice idea, but opacity:0 uses more CPU e.g. most mobile devices than visibility:hidden. Do your mobile users a favour and swap these attributes.
Very cool & useful idea, but sometimes I have to refresh to get the .js to run (both in my implementation and on your demo page). Anyone know how to fix that?
Thanks!
George
Why don’t you have a “share on twitter” ?? this article is pretty cool !
@Claire (#29)– What about IE6? What year do you think this is?
I’m currently working on a website and was having this problem! Thanks for posting, this saves me a lot of time!