Hackszine.com: Nifty Corners: roundtangles made simple

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

Posted by Jason Striegel | Feb 14, 2008 08:57 PM
Web | Permalink | Comments (2)

Comments

Newest comments listed first.

Posted by: tom.a on February 14, 2008 at 11:19 PM

Yeah, that extra 4k of download time for the other 3 corners just drags my browser to a crawl. Snark aside, a nice work around, but I applaud the day when Web browser accept a rotation/flip parameter for images, it would immediately cut the "download" time by 2 or 4 depending on the usage.

Posted by: Jason Striegel on February 15, 2008 at 2:03 PM

Considering your browser will only load a few URLs concurrently, it's the round-trips on all of those downloads that can actually affect your page load time, not to mention the server hit. Toss in corners for all the items on your site, plus the normal page image assets, a stylesheet and a javascript file or two and it adds up.