Rounded corners images with jQuery

Use

Apply CSS class “rounded” to img tag 

<img class="rounded" src="..." />

How it works

Four white GIFs are positionned at the corners.

CSS

.rounded_wrapper {
	position: relative;
}
 
.rounded_wrapper img {
	border-width: 0;
	border-style: none;
}
 
.rounded_wrapper div {
	height: 7px;
	position: absolute;
	width: 100%;
}
 
.rounded_wrapper .tl {
	top: 0;
	left: 0;
	background: url(img/rounded_corners/tl.gif) no-repeat left top;
}
 
.rounded_wrapper .tr {
	top: 0;
	right: 0;
	background: url(img/rounded_corners/tr.gif) no-repeat right top;	
}
 
.rounded_wrapper .br {
	bottom: 0;
	right: 0;
	background: url(img/rounded_corners/br.gif) no-repeat right bottom;	
}
 
.rounded_wrapper .bl {
	bottom: 0;
	left: 0;
	background: url(img/rounded_corners/bl.gif) no-repeat left bottom;
}
 
/* IE6 fix */
.ie6_width .tr {
    right: -1px;
}
 
.ie6_width .br {
    right: -1px;
}
 
.ie6_height .br {
    bottom: -1px;
}
 
.ie6_height .bl {
    bottom: -1px;
}

Javascript

$('img.rounded').one('load',function () {
	var img = $(this);
	var img_width = img.width();
	var img_height = img.height();
 
	// build wrapper
	var wrapper = $('<div class="rounded_wrapper"></div>');
	wrapper.width(img_width);
	wrapper.height(img_height);
 
	// move CSS properties from img to wrapper
	wrapper.css('float', img.css('float'));
	img.css('float', 'none')
 
	wrapper.css('margin-right', img.css('margin-right'));
	img.css('margin-right', '0')
 
	wrapper.css('margin-left', img.css('margin-left'));
	img.css('margin-left', '0')
 
	wrapper.css('margin-bottom', img.css('margin-bottom'));
	img.css('margin-bottom', '0')
 
	wrapper.css('margin-top', img.css('margin-top'));
	img.css('margin-top', '0')
 
	wrapper.css('display', 'block');
	img.css('display', 'block')
 
	// IE6 fix (when image height or width is odd)
	if ($.browser.msie && $.browser.version == '6.0')
	{
		if(img_width % 2 != 0)
		{
			wrapper.addClass('ie6_width')
		}
		if(img_height % 2 != 0)
		{
			wrapper.addClass('ie6_height')			
		}
	}
 
	// wrap image
	img.wrap(wrapper);
 
	// add rounded corners
	img.after('<div class="tl"></div>');
	img.after('<div class="tr"></div>');
	img.after('<div class="bl"></div>');
	img.after('<div class="br"></div>');
}).each(function(){
	if(this.complete) $(this).trigger("load");
});

Notes

Reference

 
 

Feedback

I'm a little unsure why you are use the jQuery.load function (which is an ajax http request). I think .each is what you are looking for.
Drew
April 16, 2009
#1
No: http://api.jquery.com/load-event/
Jérôme Jaglale
April 16, 2009
#2
This is great! This is perfect for using within a CMS and giving the client options to round their images. Thanks for putting this up....
Rhianon
June 21, 2009
#3
Hmmm..maybe I take that back.... In several browsers, if you go to another page, then come back to where your rounded corners were they are no longer rounded. If you ever come up with a fix for this, let me know.. parhelion77 AT gmail com
Rhianon
June 21, 2009
#4
Drew, you are right. You should use each instead of load. Works in FF IE6 IE7 IE8
Johan
January 29, 2010
#5
And thank you for a VERY usefull plugin
Johan
January 29, 2010
#6
Update:

- fix for IE 6 when image has odd width or/and height
- fix for problem mentioned by Rhianon above
Jérôme Jaglale
July 9, 2010
#7
great, Jérôme! but how about divs' rounding?
Tony
September 10, 2010
#8
Tony, I usually use -moz-border-radius and -webkit-border-radius, but it doesn't work in IE. If that's a problem, you could use jQuery Corner by Mike Alsup.
Jérôme Jaglale
September 10, 2010
#9
Thanks a lot for the really clear explanation!
Tobias Beuving
September 29, 2010
#10
Really nice piece of software. Thanks!!

December 1, 2010
#11
VERY NICE - SIMPLY LOVE IT

Easy to include and very elegant!!! THANK YOU!!!
Paul
December 10, 2010
#12
Excellent technique.
Hajan
January 17, 2011
#13
Works Awesome! Thanks for posting.
Babandit
January 28, 2011
#14
Gr8 its work nice
tahir sanaullah
March 2, 2011
#15
Hello,

It works great on IE6, IE7, IE8, IE9
I am having a problem with IE8->7 compatibility view, I saw the corner loaded only on your photo comes with source code have a look at the screen shoot : http://www.wcscambodia.org/photos/campatibilityview.jpg.

I am no sure it is problem from the image cache or other thing else but I try other photo it doesn't work in IE8->7 compatibilty view.

Hope there is solution soon.

Bunheng
Bunheng
March 7, 2011
#16
Hi,

I am happy to use your lovely code. However, I have a small issue with the output. The image first load square, and then are rounded by Jquery, Is there someway, I can do the rounding and then get the rounded image loaded?

Thank you,
P Coder
P Coder
March 19, 2011
#17
Hey P Coder

Maybe you could load the image with javascript
Morten O
April 13, 2011
#18
Thanks For the great info
Endeavor
June 20, 2011
#19
I'm thinking of adding rounded corners to some of the photos in my blog, www.MeAndFrenchie.com. Thanks for sharing.
MeAndFrenchie
July 15, 2011
#20
Thanks for this beautiful plugin that saved my life! xD
Victor
July 26, 2011
#21
Assuming you know the image dimensions, say 160 x 240, you can just draw a rounded border on top of the image:

HTML:

<div id="rounded">
  <img src="foo.jpg" />
  <div></div>
</div>

CSS:

#rounded {
  height: 260px;  /* img height + (rounding x 2) */
  width: 180px;  /* img width + (rounding x 2) */
  position: relative;
}
#rounded img {
  width: 160px;
  height: 240px;
  margin: 10px;  /* rounding */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
#rounded div {
  width: 160px;
  height: 240px;
  border: 10px solid white;  /* rounding, color match local background */
  border-radius: 20px;  /* 2 x rounding */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
}

Anna
July 31, 2011
#22
I used the transparent PNG in IE6 using DD_belatedPNG trick:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

for compatibility, just change the selector ".rounded_wrapper div" width to the image size, the absolute mode takes care to put the image in the right or left.

i know this is a big job to fix old IE6 bug, but in my case i need to validate this in project contract terms.

this is my tip..

thanks..


Marcelo J
January 12, 2012
#23