jquery.roundImg.js

small jQuery plugin to round image corners

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rounded Image</title>
    <!--[if !IE]><!-->
        <script src="http://www.jjenzz.com/roundImg/jQuery.roundImg.min.js"></script>
        <script>
            $(function() {
                $('img.r10').roundImg(10);
                $('img.r50').roundImg(50); 
            });
        </script>
    <!--<![endif]-->
</head>
<body>
    <img src="http://www.growldesign.co.uk/img/portfolio/cleanpalette.jpg" class="rounded r10" />
    <img src="http://www.growldesign.co.uk/img/portfolio/nmedia.jpg" class="rounded r50" />
    <img src="http://www.growldesign.co.uk/img/portfolio/cleanpalette.jpg" class="rounded r10" />
    <img src="http://www.growldesign.co.uk/img/portfolio/nmedia.jpg" class="rounded r50" />  
</body>
</html>

CSS

.rounded {
    border: 0px solid #999;
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,.3);
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,.3);
    box-shadow: 0px 0px 0px rgba(0,0,0,.3);
    margin-bottom: 20px;
}

JavaScript

/* ----------------------------------------------------- */
/* jQuery.roundImg.js
/* ----------------------------------------------------- */
/*
(function($) {
    $.fn.roundImg = function(radius) {
        var img, roundedCss;
        
        return this.each(function() {
            img = $(this);
            
            roundedCss = [
                'display: inline-block;',
                'background: url(' + this.src + ') no-repeat center;',
                '-webkit-border-radius: ' + radius + 'px;',
                '-moz-border-radius: ' + radius + 'px;',
                'border-radius: ' + radius + 'px;'
            ];
            
            img.wrap('<span class="' + this.className + '" style="' + roundedCss.join(' ') + '" />');
            img.removeClass(this.className).css({'visibility': 'hidden', 'vertical-align': 'bottom'});
        });
    }
})(jQuery);
*/