Simple round image corners with the jQuery Corner plugin

I use jQuery quite a bit, it’s my tool of choice to bring interactivity to pretty much any web app or web page. You can do an amazing amount of work with very little code. One of the great things is that the community is very active and there are many plugins to help get things done even faster.

Recently I’ve been using jQuery Corner, a plugin that was created by Dave Methvin, and later collaborated with Mike Alsup for improvements. I’ve used Mike’s Form plugin for quite some time, and finding a need for some rounded interface blocks, the Corner plugin worked without fail.

The plugin has a lot of options, but the most simple is to simple have a nice round corner:

1

$("#mydivid").corner();

Wouldn’t it be nice if you could apply that to an image? Unfortunately, it’s not that simple. But it’s really not terribly hard either. What you have to do is create div, give that div a height and width (preferably to the size of the image), and than apply the corner() call to the div. See sample code:

1
2
3
4
5
6

#testmeA
{
  width: 100px;
  height: 100px;
  background: url("sample.jpg") no-repeat;
}

1

$("#testmeA").corner();

The result? The very cool image to the left, with nice rounded corners with not a photo editing program in sight. If you want to verify that I’m not pulling a fast one, my sample image is here. For you photography folks, that’s a 135/2.8 Vivitar in an m42 mount with Automatic (A) and Manuel (M) lever that allows use with the Pentax Spotmatic F’s bright field focusing feature (oddly, I don’t have a Spotmatic F to use it with).

But Justin you say, this must be obvious to anyone that has used this plug-in. You may well be correct, but it wasn’t obvious to me until I found a need for said rounded corner image and I can’t find anyone who is using it for this sort of case. But it works so well I just can’t help but love it.

Does it work with the different Corner options? You bet.

1
2
3

$("#testmeB").corner("cool 10px");
$("#testmeC").corner("bite 10px");
$("#testmeD").corner("wicked 20px");

The simple power of a very good plugin. Next time your looking for a quick rounded corner image, break out jQuery and the Corner plugin and leave the photo editor behind.

Reader Responses

Skip to Response Form

1

TJ says:

September 25, 7:01

Will this work on an image if its not loaded as the bg-image? say #mydiv img{ css options} ?

2

Justin Ribeiro says:

September 25, 12:33

@TJ From my testing, no. It only works for me when the image is set as the div’s background.

You can see a series of tests I run to draw this conclusion via:

http://justinribeiro.com/projects/jquery/rounded-img-corners-test.html

3

GiorgosK says:

April 30, 11:24

here is an example that actually works
http://www.malsup.com/jquery/corner/image.html

I personaly have not gotten it to work yet using this way

4

Justin Ribeiro says:

April 30, 12:07

@GiorgosK Confused; the above example I wrote about works fine in everything I’ve tested it in (Firefox, Chrome, IE) What are you testing it in?

The example you link to is based on Mike’s v2.06 and jQuery v1.4.1; my examples were based on older versions from 2009 (v2.01 and jQuery 1.3.2). His latest version 2.09 was released last month, and having loaded it my examples still work fine.

Mike’s example you provide works fine for me (though that option didn’t work on v2.01, or at least not in my testing).

Comment on this Entry