JQuery Corners-- What Will They Think Of Next?

JQuery Corners-- What Will They Think Of Next?

Posted by Brad Wood
Mar 21, 2009 06:26:00 UTC
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.)

[code]jQuery('#corner_example1').corner("bite 30px");[/code]

Here is a kick-butt demo page:


Todd Rafferty

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

Raymond Camden


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?

Todd Rafferty

@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.

Raymond Camden

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

James Moberg

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" />

Brad Wood

@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

Christine Panus

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.

Sean Corfield

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).

Brad Wood

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

James Moberg

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-corners-to-html.html

Brad Wood

@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.

James Moberg

@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.)

Site Updates

Entry Comments

Entries Search