A few weeks ago I found out about Nifty Corners, a javascript/css based technique of creating rounded corners without using any images at all. The library was pretty impressive and worked very nicely. It didn't require you to add any extra markup to your html either. All you had to do was define which elements you wanted to make rounded, specify the corner colors as well as the background color and it did the rest.
Well since then the original author of the library has been improving on it and adding new features. This new version is even more impressive than the previous one. It allows you to define exactly which corners you want rounded (tl, tr, bl, br or a combination). It also has a new feature that smoothes out the corners using some slight anti-aliasing. I haven't digged into the code to see how the aa'ing is done, but it works! Very nice.
http://pro.html.it/articoli/id_599/idcat_31/pro.html
Or for the impatient, links that go directly to the examples:
- Example one: a single div with antialias
- Example two: brothers divs
- Example three: transparent by nature
- Example four: with or without them
- Example five: color explosion
- Example six: elastic nifty
- Example seven: transparent, tabbed menu. Now with borders.
- Example eight: navigational leaves
- Example nine: a floated image gallery
- Example ten: Nifty layout
And here is the link to download the library: nifty2.zip