JQuery Corners-- What Will They Think Of Next?

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

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?

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

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

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

@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

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.

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

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

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

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

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