Rounded corners images with jQuery


Apply CSS class “rounded” to img tag

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

How it works

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>');
	// 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)
		if(img_height % 2 != 0)
	// wrap image
	// 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>');
	if(this.complete) $(this).trigger("load");




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.
Apr 16, 2009
Jérôme Jaglale
Apr 16, 2009
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....
Jun 21, 2009
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
Jun 21, 2009
Drew, you are right. You should use each instead of load. Works in FF IE6 IE7 IE8
Jan 29, 2010
And thank you for a VERY usefull plugin
Jan 29, 2010

- fix for IE 6 when image has odd width or/and height
- fix for problem mentioned by Rhianon above
Jérôme Jaglale
Jul 9, 2010
great, Jérôme! but how about divs' rounding?
Sep 10, 2010
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
Sep 10, 2010
Thanks a lot for the really clear explanation!
Tobias Beuving
Sep 29, 2010
Really nice piece of software. Thanks!!

Dec 1, 2010

Easy to include and very elegant!!! THANK YOU!!!
Dec 10, 2010
Excellent technique.
Jan 17, 2011
Works Awesome! Thanks for posting.
Jan 28, 2011
Gr8 its work nice
tahir sanaullah
Mar 2, 2011

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 :

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.

Mar 7, 2011

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
Mar 19, 2011
Hey P Coder

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


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


#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;

Jul 31, 2011
I used the transparent PNG in IE6 using DD_belatedPNG trick:

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


Marcelo J
Jan 12, 2012
it's good;
Jan 27, 2014