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!
Will says:
So this is what you’ve been up to. hehe. I wondered where you’d gone Mike!
.
On a more serious note this looks pretty interesting, and Im sure its going to be another popular download.
.
Comment made on September 25, 2007 at 6:59 pm
Mike Jolley says:
lol thanks. Had (and still got) a lot on my plate, so i’ve been busy busy busy.
Just uploaded newer version, removed some functions that were un-needed.
Comment made on September 25, 2007 at 9:32 pm
Torgil says:
Looks very promising!
Is it possible to run multiple instances with different corner settings specified?
And if so, how to go about it?
Comment made on September 26, 2007 at 1:39 pm
Chris Pugsley says:
Does this support the passing of parameters like the original curvy corners (ie corner radius)?
Comment made on September 27, 2007 at 12:21 pm
Mike Jolley says:
Torgil and Chris: Yes you can, see the post; Ive updated with an example.
Comment made on September 27, 2007 at 2:03 pm
Bunker says:
Hey, tried the example page with safari 3.0.3 and it displayed some funny behaviour, the CC script works fine with the same safari.
Since I know jQuery doesn’t always plays nice with safari it could be that it is jQuery related and not your code.
I just thought I’d mention it.
You can find a screenshot at http://www.achter.be/cuvvycorners.png.
Greetz
Comment made on September 30, 2007 at 10:49 pm
Diseño Web Chile says:
Promising enough, we will test it
Comment made on October 1, 2007 at 5:23 am
Paul says:
Looking forward to such a plugin. jQuery is the bomb. However, Safari is having issues with this plugin. In examples where all 4 corners are rounded, the inner corner background color does not apply – setting a background color on the entire html body will show through in those areas.
In examples where top left and bottom right corners are set, the entire background color of the top and bottom areas is not applied.
The lack of background compounds the issues of the ‘sans-border’ example since there is not border line color to designate where the background color is missing – though it appears that it’s the entire top and bottom area as well.
Thoughts?
Comment made on October 2, 2007 at 2:24 pm
Paul says:
screenshot on win safari: http://www.pjms.net/clients/jQcurvySS.gif
mac version looks the same…
Comment made on October 2, 2007 at 2:30 pm
Paul says:
Oops, it seems the mistake was mine – i extricated the inline css code and put it in a style tag – but outside of the head element. Once i put the style stuff in the head element where it belonged, all is right with safari once more. Plugin doesn’t seem to work at all with external css however…
Comment made on October 2, 2007 at 5:52 pm
Jacques says:
I confirm the funny behavior in Safari 3.03.
Comment made on October 3, 2007 at 7:48 am
schnuck says:
doesn’t work in safari 2.x either. white squares at all four corners.
Comment made on October 3, 2007 at 8:54 am
joeri says:
Does it work on top of div’s that have a background image?
Comment made on October 3, 2007 at 1:33 pm
visitor says:
is there an xhtml strict version withuot inline styles?
Comment made on October 4, 2007 at 4:33 am
malsup says:
Very nice work, Mike!
Comment made on October 4, 2007 at 12:20 pm
fxencore says:
Its nice, but I think the solution with images is better because not every browser display this javascript correctly.
Comment made on October 8, 2007 at 10:14 am
Lau says:
Argh crap… push ctrl+r by accident just as I was finishing up my replay :/ Oooh well, here we go again.
Anyway, great stuff you’ve got going here. Love jQuery and rounded corners
But I ran into the same problem with Safari as mentioned above while playing with Adobe AIR (which uses the same web toolkit, WebKit, as Safari), so I decided to look into it.
I found that the problem is in the drawPixel function in the if-statement at line 487 when called from line 168 “if(y1 > -1) this.drawPixel(…);”. It looks like the problem is that on Safari $(this.box).css(“backgroundImage”) returns undefined when the style is absent which results in the if-statement evaluating to true.
I don’t know if this is a bug in jQuery (it’s a bit hard to find out what .css() is supposed to return), but a quick fix is to set this.backgroundImage to an empty string if it’s undefined:
Line 30:
- var backgroundImage = $(this.box).css(“backgroundImage”);
+ var backgroundImage = $(this.box).css(“backgroundImage”) || “”;
While hunting down this bug I found another one in the CSS on line 490, it’s missing:
“background-color”: colour
The bug shows up when the background image has transparency near the corners.
Hope this helps,
Lau
http://www.iola.dk
Comment made on October 14, 2007 at 11:21 pm
Angie says:
I’ve tried up, down and backwards to get this plugin to round something and all I’m left with is a pile of hair next to my desk. Any clues would be greatly appreciated. I started with curvy corners and due to it being a bit slow loading, as well as my desire to keep with one library (jQuery), I have been trying multiple other options. So far, I just keep having to reinstall the original Curvy Corners because there is an issue with everything else. I was really excited and had very high hopes at making this one work. Especially since it was based off the one I am already using and have working perfectly. However, I can get no where with this. If someone could answer the following it would help greatly.
1. Does the code work with earlier versions of jQuery or do I have to use 1.2+?
2. Is the statement in the comments about the script not working at all with external css styles true? I didn’t even bother learning how to include styles in my header as I’m a strictly linked file kinda gal, this comment is the only thing I have been able to conclude may be the culprit.
3. I copied the code straight off the example page and still it wouldn’t render any curves. The styles are not in the header in that source code, so the above mentioned comment is even more confusing.
3. Due to the fact that I have to run jQuery in no conflict mode, I have to adjust the document ready call to: jQuery(function($) { or it won’t play nice with other javascript libraries, could this be of relevance?
Comment made on October 21, 2007 at 6:09 am
Mike Jolley says:
@Angie – First things first, install firebug extension for firefox. It will inform you of any JS errors.
1 – Only tested 1.2
Comment made on October 21, 2007 at 9:27 pm
Lau says:
It seems there’s a problem with background images in Firefox. The bottum fill-part is the color of the top edge of the image. I’m experiencing this problem when putting in a gradient as background.
Comment made on October 22, 2007 at 1:33 pm
elvisparsley says:
I tried to put for this for vertical navigation, but it does not work in IE7. Is there anyone who can help me?
Comment made on October 30, 2007 at 4:35 pm
ben says:
Was having problems with IE7 clear text, bold fonts were looking aliased in a bad way. There’s a corrective measure on line 469 that can be modified if anyone else encounters the issue.
if(($.browser.msie) && ( $(this.box).css(“opacity”) ) )
Was able to get anti-aliasing back by using the correction only when opacity was applied, I think this makes sense but alter at your own risk..
if(($.browser.msie) && ( $(this.box).css(“opacity”) < 1 ) )
hope this helps.
Comment made on November 21, 2007 at 5:19 pm
ben says:
regarding last comment, here’s slightly safer logic.
(($.browser.msie) && ( $(this.box).css(“opacity”) ) && ( $(this.box).css(“opacity”) < 1 ) )
Comment made on November 21, 2007 at 5:31 pm
Mike Jolley says:
Uploading a new version to fix some bugs in ie7 etc, I even found a logic bug that the original plugin had!!!
Comment made on November 22, 2007 at 12:29 am
Jukka-Pekka Keisala says:
Is it possible to add gradient image lets say that on the top there would be #ccc and bottom #eee.
Can I somehow add gradient #ccc -> #eee in the middle?
Comment made on November 25, 2007 at 1:14 pm