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

Comments are closed.

Discuss this article with the rest of the community on our Discord server!


Maker Faire Bay Area 2023 - Mare Island, CA

Escape to an island of imagination + innovation as Maker Faire Bay Area returns for its 15th iteration!

Buy Tickets today! SAVE 15% and lock-in your preferred date(s).