Rounded corners images with jQuery

• see live example | download
• IE6, IE7, IE8, Firefox, Safari, Chrome
• white background only

Apply CSS class “rounded” to img tag

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

Four white GIFs are positionned at the corners.

.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;
}

$('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");
});

• James Godwin uses transparent PNGs (not IE6 compatible) for smoother corners:

• inspired from http://www.sitepoint.com/examples/rounded_images/