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!
Related Entries
- JQuery Curvy Corners 2 Early Beta Available
- Easy jQuery Pull Quotes
- jQuery Curvy Corners 1.x and 2.x updated and moved to Google Code
- Book Review – jQuery UI 1.6
- Book Review – Learning jQuery 1.3
298 - Benjamin says:
Tried extracting, but had trouble doing so. Seems that the scripts or other content in the .zip file relating to __MACOSX.
Bottom line… ‘jquery.curvycorners.min’ is the only one that unpacked.
Any suggestions? Different .zip/extraction program?
@_@
Comment made on April 24, 2009 at 10:25 pm
299 - Craig says:
Thanks for the plugin!
Saves me heaps of time on a regular basis!
And thanks to Smccullough for the bug fix, no more uncaught exceptions for me!
Comment made on April 27, 2009 at 1:43 am
300 - Jan says:
@Smccullough: This fixed when you have all corners rounded, but I still got it when i do this:
$('#header').corner( {tl: false,
tr: false,
bl: { radius: 8 },
br: { radius: 8 } });
Even if i try radius 0 it doesn’t work
Comment made on May 5, 2009 at 11:34 am
301 - Smccullough says:
@Jan
I couldn’t seem to replica your issue you are having?
I copied and pasted verbatim with no errors:
$(document).ready(function(){
/* Round corner */
$('div.rounded').corner( {
tl: false,
tr: false,
bl: { radius: 8 },
br: { radius: 8 }
});
});
What exactly is your setup?
Browser: IE6/IE7 (/IE8, I haven’t test 8 yet)?
jQuery version?
In what order are you adding your script includes?
You can post a response here or over at my blog (I’ll be able to response to you quicker if it’s on mine, simple because I’ll get an email notice)
Hope I can help!
Your friendly neighbourhood,
Smccullough
Comment made on May 6, 2009 at 2:26 pm
302 - Tony says:
These things aren’t working on IE8.
Comment made on May 16, 2009 at 3:56 pm
303 - Leanne says:
Hi there, I was wondering if there’ll be an ie8 fix coming out soon? I am starting to reeeeally hate ie8.. :X
Comment made on May 26, 2009 at 11:49 am
304 - 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
305 - 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
306 - All my bookmarks ever | Daniel John Gayle says:
[...] Blue Anvil Journal » Blog Archive » Anti-aliased Rounded corners with JQuery [...]
Pingback made on May 30, 2009 at 12:51 am
307 - 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