Nifty Corners: roundtangles made simple

Since the border-radius CSS parameter has been too slow in coming and rounded corners don’t seem to be going out of style any time soon, everyone web developer I know has their own personal brand of CSS background-image and DIV gymnastics for creating smooth-cornered roundtangles. Besides the extra load time that’s required to download all those corner images, it’s just a lot of extra work. The general principle of unnecessary work is against my slacker sensibilities, which is why the Nifty Corners Cube javascript library caught my attention.

Nifty Corners uses Javascript to dynamically add rounded corners to HTML elements at runtime, without the use of images. You can choose a corner style and tell Nifty Corners what CSS id, class or element to apply it to. The javascript function will dynamically alter the specified elements, drawing 1px high DIV strips at the top and bottom of the element to give it the rounded corners. The effect can be used for everything from rounded content areas to tab-menus.

It won’t solve every problem—rounded borders, in particular, are still a bit of a nuisance—but it’ll make your work a lot easier for many design challenges and it’s compatible with Firefox, Safari and IE 5.5-7.0.

Nifty Corners Cube – Link