How to setup rounded corners on images (using jQuery)

Quick howto on setting up cross browser rounded corners for next time I have to do it.

Save this as jquery.rounded.js :

$(document).ready(function() {

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

Use this CSS code:

.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(../images/rounded_corners/tl.png) no-repeat left top;
}
.rounded_wrapper .tr {
    top: 0;
    right: 0;
    background: url(../images/rounded_corners/tr.png) no-repeat right top;    
}
.rounded_wrapper .br {
    bottom: 0;
    right: 0;
    background: url(../images/rounded_corners/br.png) no-repeat right bottom; 
}
.rounded_wrapper .bl {
    bottom: 0;
    left: 0;
    background: url(../images/rounded_corners/bl.png) no-repeat left bottom;
}

Use these images: click here to download rounded_corners.zip

Include jquery and this rounded corner script:

<script type="text/javascript" src="js/jquery-1.4.2.min.js" language="javascript"></script>
<script type="text/javascript" src="js/jquery.rounded.js"></script>

Then give the images a class of rounded (doesn’t work on div’s)

<img src="foo.jpg" class="rounded">