IMGr is a jQuery plugin for rounding image corners. The script utilizes CSS3 in modern web browsers, and VML in Internet Explorer 8 and below.

Features

  • Unobtrusive, <img> element preserved
  • Configure border size, style, color and
    individual corner radius
  • Update corners dynamically
  • Uses CSS3 in supporting browsers
  • Uses VML in IE 6, 7, and 8
  

Download

FULL
jquery.imgr.js ~15KB
MIN
jquery.imgr.min.js ~12KB

Usage

1.) Add jQuery and IMGr to your HTML document.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imgr.js"></script>

2.) Inside of a <script> block, call IMGr on any <img> element.

$(document).ready(function(){

    $("img.ex1").imgr({size:"3px",color:"yellow",radius:"10px"});
        // Finds <img> elements with the class "ex1"
        // IMGr applies a 3px yellow border with 10px corner radii.

    $("img.ex2").imgr({size:"5px",color:"blue",radius:"15px 5px 15px 5px"});
        // Finds <img> elements with the class "ex2"
        // IMGr applies a 5px blue border with 15px(tl) 5px(tr) 15px(br) 5px(bl) corner radii.

    $("img.ex3").imgr({size:"1px",color:"red",radius:"20px 0"});
        // Finds <img> elements with the class "ex3"
        // IMGr applies a 1px red border with 20px(tl tr) 0(bl br) corner radii.

});

/* See these examples below */

3.) Dynamically update with IMGr

$(document).ready(function(){

    $("img.ex1").imgr({size:"3px",color:"yellow",radius:"10px"});
        // Finds <img> elements with the class "ex1"
        // IMGr applies a 3px yellow border with 10px corner radii.

    $("a#update").click(function(){
        $("img.ex1,img.ex2,img.ex3").imgr({radius:"20px"});
        return false;
             // Finds <img> elements with the class "ex1, ex2, and ex3"
             // IMGr applies 20px corner radii; preserving all other pre-existing settings
    });

});

Click Here To Update /* See examples above */

4.) Parameters & Defaults

Settings

Variable
Default Value
Available Values
radius"10px"Any quoted ("") pixel value

Shorthand guide:

"A" - A(tl tr br bl)
"A B" - A(tl tr) B(bl br)
"A B C" - A(tl) B(tr) C(bl br)
"A B C D" - A(tl) B(tr) C(br) D(bl)
size"0px"Any quoted ("") pixel value
color"#000"Any quoted ("") hex color value

or any color name (ie. "red", "green", "blue")
style"solid""solid"
"dashed"
"dotted"
"double"

Notes

1.) Tested compatible in IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62

2.) Note for Opera - Opera 10 support for the CSS3 background-size property can be buggy in some instances; causing improper background stretching.

3.) Version Notes

Current Releasejquery.imgr.1.0.1.zip ~9KB
Previous Versions-
Reported Bugs (report a bug)Chrome and Safari only applied to first instance of image class Resolved

IE render all images blurry Images suffer a minor drop in quality when rendered in VML. This will affect IE6, 7, and 8. Whether or not the quality loss is acceptable for your application is up to your discretion.

Firefox pixelates the images Pixelation occurs whenever an image is distorted from its native size. Not an issue with IMGr.
Pending FixesChrome and Safari only applied to first instance of image class Resolved


4.) This script is released under the MIT license and is completely open to modification and redistribution.

5.) Bugs? Suggestions? Comments? Questions?

The script is 100% free,
but donations are appreciated.