Anti-aliased Rounded corners with JQuery
Recently I’ve been searching for a method of creating nice looking rounded corners with Javascript & JQuery.
First I found the “JQuery Corner” plugin for rounded corners, but was disappointed that it did not include smooth, anti-aliased corners.
I then did some more google-trawling and found this post, which contained a modified version of Curvy Corners for use with JQuery. Now this script was much much better.
However…the filesize was a massive 40kb, way too big for production use, and to make things worse the code was not compatible with packer so I could not reduce the filesize.
Well, I got busy, and fixed the errors. It is now fully packer friendly meaning easy rounded corners in JQuery at only 9kb 8kb 15kb 20kb 16kb 10kb. Excellent. Read more for the download link.
Demo and download
You can also grab the plugin from Google Code.
The packed version is only 10kb, the uncompressed version is 23kb (thats half the size of the original script!).
Quick example
To make a curvy cornered box simply use:
1 | $('.round_this').corner(); |
Thats all there is too it. A great script!
For more information on Curvy Corners, check out its official site.!
*Edit: Found a small error in IE7 with the backgroundPosition property, fixed now. New file uploaded.
*Edit 2 – 25th Sep 07: More optimizations, smaller file!
*Edit 3 – 29th Sep 07: More optimizations, smaller file, and demo page up!
*Edit 4 – 6th March 08: New version up with better background image support.
*Edit 5 – 19th May 08: No extra padding, safari fixed, larger filesize to reduce overhead and increase speed.
*Edit 6 – 9th Aug 08: General fixes from feedback
*Edit 7 – 7th Oct 08: Major overhaul to improve compatibility with other plugins
*Edit 8 – 2nd June 09: Now compatible with jquery 1.3.2 – All future updates will be on Google Code (http://code.google.com/p/jquerycurvycorners/) – Hence im closing comments here. Post your contributions either on google code or in the forum.
Found this post useful? Why not buy me a coffee!
the Ramen Noodle says:
@Jim D
Yes, I’ve also noticed that the antialiasing is very bad in this version. It looks like just a 45-degree cut instead of a rounded corner. With a large enough radious (like 15), I get a little bump in the middle of this 45-degree cut. But if I disable antialiasing, then the curve looks fine, albeit aliased.
Comment made on October 17, 2008 at 6:32 pm
Mitch says:
Just letting you know this doesn’t work strait off when using jQuery in noConflict mode. No biggie, just had to switch out all the ‘$’ for ‘jQuery’, but I’ve not had to do that with any other plugins.
Great plugin though….fantastic!
Comment made on October 20, 2008 at 12:15 am
Jeroen says:
I´m trying to get a background image centred in a rounded box. From comment 217 I understand that bottom aligned is not possible, but does that also apply to centre aligned? Or is there a jscript setting that I should use instead of css?
What I see when loading my page is the correctly aligned image that shifts as soon as rounded-corners kicks in.
Thanks!
Comment made on October 20, 2008 at 7:27 pm
saebl says:
I dunno why but my Firefox 3.0.3 can’t use the packed version. min and source works fine. Nevertheless, great work! Greetings
Comment made on October 23, 2008 at 10:48 pm
saebl says:
Forget my last comment. Now it works. It was some weird FF cache bug i guess…
Comment made on October 23, 2008 at 11:01 pm
ttutuncu says:
Farbtastic color picker is not working with this
Comment made on October 31, 2008 at 8:33 am
Brian Roy says:
OK – I’d like to use this to apply curved corners to dynamically created div elements. The problem is regardless of using jQuery(‘.class’).corner(…
or $(‘.class’).corner(…. I get a javascript error “is not a function”.
Any assistance would be very helpful (yes I”ve included the javascript in the HTML).
Comment made on October 31, 2008 at 7:23 pm
suresh says:
really superb……..
Comment made on November 3, 2008 at 7:54 pm
open-keywords says:
Thanks very much for this
CurvyCorners has published some updates (v1.2.10), does it make sense that you update yours ?
Regards
Comment made on November 5, 2008 at 6:08 pm
Lev says:
Hi Mike – Great plugin, and thanks for the hard work. I am wondering if you, or anyone else, notices how much better the corners look using the original curverycorners script compared to the JQuery plugin. It’s almost like the anti-aliasing is not working at all in the latter. I’ve tested in both Safari and FF, using relevant demo pages, and the difference is quite noticeable.
Original: http://www.curvycorners.net/examples/demo.html
JQuery: http://blue-anvil.com/jquerycurvycorners/test.html
Any thoughts?
Comment made on November 10, 2008 at 8:51 pm
Sebastian says:
I agree with the Original version the anti-aliasing effects are much better why is that?
Comment made on November 13, 2008 at 4:36 am
Ben says:
Hey, this is fantastic, thanks a lot. One question though – is there a way to apply this to tables? I tried it and it didn’t work, but maybe there’s some trick to it.
Comment made on November 14, 2008 at 11:49 pm
keithics says:
Nice plugin but anti-alias doesn’t work.
Comment made on November 15, 2008 at 11:15 pm
Thomas says:
Round corners? No problem use my backgroundCanvas plugin:
http://www.maierhofer.de/BackgroundCanvas.htm
Give it a try, its worthy!
Comment made on November 17, 2008 at 6:17 pm
Sumit Chachra says:
Safari is badly broken. Not sure of IE
Comment made on November 19, 2008 at 1:24 am
Dave Foy says:
Hi Mike – did you have chance to look into why anti-aliasing isn’t working? I’m sure it used to in previous versions?
Comment made on November 19, 2008 at 11:37 am
Mike Jolley says:
I’ve repaired the anti-alias – will upload this afternoon.
Comment made on November 19, 2008 at 1:55 pm
Mike Jolley says:
Uploaded. Enjoy
Comment made on November 19, 2008 at 5:38 pm
Eric says:
Thank you for fixing the anti-alias issue. You rock!
Mike, how difficult would it be to get Curvy Corners to be able to round other elements, such as the way “JQuery Corner” can? The JQC solution has jagged edges, which is its Achilles’ heel, but with it we’re able to round h2s, etc…anything with a background color.
Comment made on November 20, 2008 at 1:48 pm
Mike Jolley says:
@Eric – Since this uses divs for corners etc it would be wrong to have them within a heading because that would result in bad markup.
I guess we could use spans instead of divs just to make it valid though…
Comment made on November 20, 2008 at 10:19 pm
spirit says:
I can’get get it to work with IE (6&7). It doesn’t cruve anything and I’ve no error at all…
Any advice?
Comment made on November 24, 2008 at 1:50 pm
spirit says:
Oh by the way, I’m having trouble with other jquery plugins like jwysiwyg and WYMeditor which transform textarea into wysiwyg editor. My wysiwyg textarea is inside a rounded div. The curvy plugin doubles the wysiwyg editor and disable them (so basically I have two editors one below the other instead of only one and I can’t write text in it).
Thanks for any help
Comment made on November 24, 2008 at 1:56 pm
Mike Jolley says:
@spirit – Test for JS errors using firebug for firefox. For the other error, make sure you apply Corners BEFORE the wysiwyg script.
Comment made on November 24, 2008 at 2:15 pm
spirit says:
Thanks a lot for your help! it works for the wysiwyg problem!
Regarding IE issue, I have no error with Firebug in Firefox
Comment made on November 24, 2008 at 3:54 pm
Angelo Berios says:
Great plugin! Works well with backgrounds both behind, and within the rounded div. I did, however, add the following styles to the applyCorners function on line 268:
‘margin-top’:strip_px($$.css(“margin-top”)) + topMaxRadius + “px”, ‘margin-bottom’:strip_px($$.css(“margin-bottom”)) + topMaxRadius + “px”
I found that without these, the divs would overlap and need to be manually styled. Now the just act as if there is a zero margin by default.
Comment made on November 25, 2008 at 7:22 am