GeekFindr: curvyCorners

One of the requirements of building a web2.0 site is to have rounded corners, square corners are so web1.0. This can be a little bit of a pain in the butt, building the images and putting in the markup to round all your boxes. Fortunately there’s curvyCorners to the rescue!

This is a bit o’ javascript that you can include on your pages and then a little bit more javascript and a little bit of html markup and you can round all the corners you like! No image creation required. It even does borders and an anti-aliasing effect. It’s quite easy to use, letting you have pretty granular control over the look of the corners - from colors to how wide the radius is.

There’s a little bit of a tradeoff, though. It manages all these corners through the obsessive creation of div’s. It creates a ton of divs (on the fly - not in your markup) for each corner you want to round, the wider the radius and/or the use of borders/anti-aliasing increases the number of div’s it needs to give you the effect you want. This can cause a bit of a delay on browsers so your corners will snap in a little after the page is first drawn. On slower machines, this delay can be more pronounced. On the flip, flip side of this - because all of this markup is runtime, it actually simplifies the markup in your pages since you don’t have to code in all those corners yourself.

Like anything this is a great tool for the right purpose. It certainly makes rounding corners super easy and the creator of this is working on a complete rewrite of the code, making it more modular and probably more efficient. This is worth evaluating to see if it’s right for your site - give it a shot, it won’t take you long to incorporate it and if it works for you, it’ll save you a ton of time making the curved corner images and adding all that markup.

Apr 15th, 2007 · Comments RSS · · · · · Tags: geekfindr · javascript · web2.0