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.
I found the issue… problem resolved! Some CSS code was adding padding to that a particular div. Thx again :)
Don’t run OK in IE 8. Sorry
That is because IE8 doesn’t support border-radius at all. It has nothing to do with the JS code.
Do yourself a favor trashing this crap and find a REAL browser. That is the only real solution, if you’re searching for a one!
IT’s not about us, it needs to work right in IE 8 Because so many of our clients website visitors are using it still. Around 40%. So ya, much as I don’t want to, I have to make sure the design works in IE6, 7, 8 and 9.
Not the best of advice, @Mamouneyya and switching browser is not the only solution. You could try CSS3PIE for support in IE8, I think it even goes down to IE6. So the IE users visiting your site will get to see your rounded corners.
Yes, @Mamouneyya, I wish people would stop saying “oh, just abandon ie, its crap” – in the real world, I just can’t tell my clients that, and expect to be paid.
@Rachaelov just put fixing IE as an extra on your estimates. This way you get to see how many clients are really interested in supporting it. You won’t waste time on each project and if the client goes for it you get paid.
There’s nothing wrong with holding onto the past, not until one tries to make others do the same. If you like IE, that’s great, but it’s not, and never has been, part of the wave of the future. The choice is up to the user to stick with a sewing machine that isn’t capable of making a zig-zag stitch, or acquiring one that is. It’s just not reasonable to expect for developers to find fixes for a straight stitch machine, and more and more developers are refusing to. Microsoft certainly has the resources to keep up with technology. That they refuse to is their black eye. I have no intention of allowing that to blacken mine.
esoy probando el alojamiento de
Thank you very much! While I cannot say it is THE perfect solution, since it won’t work with JS-disabled browsers, it’s still perfect when you cannot modify the HTML layout.
Without having tried this: would the above JS + Pie css (http://css3pie.com/) make this work on IE as well?
Brilliant effect!
I tried to implement this on my wordpress blog’s theme (http://www.iamperfectlyaverage.com/blog) and added the .js file to my /js folder in the theme folder and then added the jQuery code to my header.php file and changed the div class name to match the one I was trying to change: .avatar—the comment avatars, but it did not work. Any idea what I’m doing wrong? Is there some extra step I need to take in order for it to get to work on a WordPress theme? Any help would be greatly appreciated.
Hi,
I stumbled across this site and have to thank you alot for bringing this idea to my mind, I have used the “background trick” in the past, but this jquery really makes it easier to add extras in the future and will become a staple part of my designs now.
Many thanks
Jimmy
Tricky! Thanks!
Hi! :)
(sorry for my bad english)
How can I put some text on the right of the images?
I tried with align=left on the image, but the text is always on the back.
It’s amazing looking back at this post and realizing how far advanced this post was in regards to CSS3 and browser support. Now most browsers support rounded corners on elements using the border-radius css attribute.
Instead of all that
its faster and easier to do it in simple css3 without having to change pictures to background or adding javascripts, the trick is to use overflow: hidden; and works on most browsers have not test it on opera but every other browser works; example
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 5px 0px #ccc,0px 1px 0px rgba(204,204,204,.3) inset;
-webkit-box-shadow: 2px 2px 5px 0px #ccc, 0px 1px 0px rgba(204,204,204,.3) inset;
box-shadow: 2px 2px 5px 0px #ccc,0px 1px 0px rgba(204,204,204,.3) inset;
margin:0px 5px 0px 0px;
overflow: hidden;
I just confirmed, Miguel, your method works on FF11, chrome, ie8 and (via ie tester) ie6,7. So does the jquery, but the css is probly better and wont have a flash of corners while the js loads.
oh, forgot to mention that ie only works with cssPie http://css3pie.com/documentation/getting-started/
Just wanted to mention that this worked beautifully and is the much simpler solution. Thanks!
Useful trick. Very useful indeed.
I use drupal & this can be achieved by using a module called Imagecache actions.
but this tutorial is helpful in lot of ways. :)
Thanks.
awesome little tutorial. thanks for sharing
thanks, i will share..
Thnks for share……………………………
your wellcome
Thanks for this article!
I started with your example, but I didn’t need the shadows. Plus, I also wanted to see if I could do this without creating a background image.
I ended up with a similar technique, but instead of wrapping a span around the image, I am putting the span before the image. The span contains a rounded edge box with a thick border that matches the page background color. Like your example, the span grabs the original images width and height.
At the end of the function (where the opacity setting was) it adds a border class to the image to match the span above (I found it didn’t look right if I didn’t do this). It seems to work in Firefox, Safari, Chrome, and IE9. I’m more of a visual designer and HTML/CSS guy, but hey, it worked for me.
Here’s my tweaked code:
$(document).ready(function(){
$(“.rounded-img”).load(function() {
$(this).before(function(){
return ”;
});
$(this).css({ border:”3px solid #FFF” });
});
});
Crap. The pasted code didn’t past correctly. Sorry about that.
thank you for share.. Good Joob!
I am trying to do something on round border with css property which link http://www.webinbangla.com/2012/05/css-round-shape/
Great tutorial there, But I want to know how to create something smiler to the images that appears on the commented post, Having people image in the circle box on the comment section.
Thanks