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!
Leanne says:
Oh and in IE8, this is the error (if it helps?):
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SU 3.22; SLCC1; .NET CLR 2.0.50727; InfoPath.2; Media Center PC 5.0; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
Timestamp: Tue, 26 May 2009 10:50:34 UTC
Message: Exception thrown and not caught
Line: 73
Char: 2424
Code: 0
URI: http://www.*****************.com/scripts/jquery-1.3.2.min.js
Comment made on May 26, 2009 at 11:51 am
Leanne says:
Also, is there a drop shadow / outer glow plugin which would work with the rounded corners?
Comment made on May 26, 2009 at 1:29 pm
Mike Jolley says:
Those looking for compatibility with new jQuery should now check out http://code.google.com/p/jquerycurvycorners/ – Ive moved the code there and updated the build.
Comment made on June 2, 2009 at 12:52 pm