JQuery Corners-- What Will They Think Of Next?

Posted At : March 20, 2009 11:26 PM | Posted By : Brad Wood
Related Categories: JavaScript, JQuery

I have consistently been impressed by the number and quality of JQuery plugins that abound. Today at work we ran across JQuery Corners. This friggin' awesome plugin allows you to put rounded corners on your divs and it's oh, so easy.

It used to be when you wanted that pod of content to have pretty rounded corners you had to start slicing images up. JQuery Corners doesn't just do rounded corners-- there are a whole slew of shapes you can apply including border mods all with JavaScript and CSS via a couple lines of code. The other beautiful things is it works in Firefox, and IE both. (And I assume other browsers as well.)

1 jQuery('#corner_example1').corner("30px");

1 jQuery('#corner_example1').corner("bite 30px");

Here is a kick-butt demo page:
http://www.malsup.com/jquery/corner/

Comments (12) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 4881 Views

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

Dude, you're behind. jQuery SQUARES is all the rage these days. ;)

# Posted By Todd Rafferty | 3/21/09 6:46 AM

Nice!

Todd - is your comment a joke? Sorry - can't tell if you are being serious. It sounds like maybe you are saying there is another plugin that is better?

# Posted By Raymond Camden | 3/21/09 9:50 AM

@Ray: *chuckles* - I was joking. Note the ";)" at the end and uh, we can do squares already without jQuery.

The thing I like the most about jQuery corners is that it will attempt to work with IE. If your browser can't handle the radius css attribute, then it'll fall back to using images or it'll just go back to using squared edges. Of course, I could be getting my jquery corners plugin mixed up. There's at least 2 of them that I'm aware of.

# Posted By Todd Rafferty | 3/21/09 9:53 AM

Nice. Thanks for the clarification. Sometimes there are so many jQuery plugins it can be a bit overwhelming. ;)

# Posted By Raymond Camden | 3/21/09 9:59 AM

Check out NiftyCube for different options. One of their samples has a background image and there is a tabbed navigation sample:
http://www.html.it/articoli/niftycube/index.html

http://www.netzgesta.de/corner/
This one uses canvas and adds rounded corners to images. It's being updated to work with IE8 right now, but until then you can add this to make it work:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

# Posted By James Moberg | 3/21/09 10:24 AM

@Todd: Yeah, I only glanced through the JQuery.Corners code. It's real clean-- not nearly as much code as I would have expected for so many different designs it handles.
There's a case statement in there for each style that has wicked expressions like:
case 'round': return Math.round(width*(1-Math.cos(Math.asin(i/width))));

For my 30px rounded corners above, JQuery Corners created 30 transparent divs, all 1 px high, stacked on top of each other for both the top and bottom of my main div. It sets a white left and right border of however many pixels wide the corner is at that point. Basically, it appears to "erase" your div one line at a time by overlapping it with these "sliver" divs.

I never would have thought something like this would wok. lol

@James: Thanks for showing me NiftyCube and the "other" corner.js

# Posted By Brad Wood | 3/21/09 11:41 AM

We used this setup to create a nested grouping of divs that had a rounded border, with a rounded body content with a rounded header that had a half rounded accent line... (which is five nested rounded divs) we first used jquery.corners (http://www.atblabs.com/jquery.corners.html ) which was pretty slick, however we had some issues with the nesting not showing consistantly between browsers. Our borders would be thicker on top/bottom than left/right and would be different widths in the different browsers. the jquery.corner -- note the lack of an s (http://jquery.malsup.com/corner/) provided a more consistant result and seems to be more mature and updated more frequently.

# Posted By Christine Panus | 3/21/09 3:14 PM

Safari warns me that site (malsup.com) "may contain malicious software / malware". That's the first site I've ever visited that has triggered that warning...

For years, I've been using NiftyCorners - nice to know there's a jQuery solution too (I feel like saying "of course" since there appears to be a jQuery solution for *everything*).

# Posted By Sean Corfield | 3/21/09 6:50 PM

@Sean: Perhaps Safari gets offended when you try to round its corners without asking. :)

# Posted By Brad Wood | 3/21/09 8:37 PM

Here's a great/easy way of rounding corners using only CSS (no scripting.) It works it works on every browser except IE.
http://www.insideria.com/2010/04/adding-rounded-co...

# Posted By James Moberg | 4/16/10 8:22 AM

@James: That is cool, but unfortunately "every browser except IE" is a VERY large caveat. Especially when you run an e-commerce site which caters to government and corporate users, many of whom are stuck with IE 6.

# Posted By Brad Wood | 4/20/10 4:58 PM

@Brad: IE6 users can view the same website with square corners... it's called graceful degradation. No functionality is lost due to a corner not having a round edge.

I previously generated round corners using scripting as well as sliced images and tables (old school), but have abandoned both techniques in favor of CSS styling. It's much easier to modify on-the-fly and faster loading (because it doesn't add additional resources or require an "onload" function.)

IE6 is officially dead. Too bad some government agency can't spend the effort to put together a Firefox or Google Chrome bundle that they can recommend for distribution. (I know it's more difficult than that... training, plug-ins, etc.)

# Posted By James Moberg | 4/20/10 7:33 PM

[Add Comment]