Rounded corners are one of the most popular effects in the Web 2.0 era, while being a huge headache from the coding standpoint. Here at Wildbit, we respect web standards and love to keep our code clear and concise, but every block with rounded corners requires up to four block elements.
Seems like a solution to this problem has been found at last! Recently while browsing a community of web developers in Ma.gnolia I found an interesting technique Nifty Corners Cube. It’s author, Alessandro Fulcinite, did a great job with JavaScript and CSS. With help of this JS library you can…
- Use only one block element for block with rounded corners
- Make aliased and anti-aliased rounded corners in several sizes
- Use rounded corners with graphic backgrounds
- Forgot about using images for rounded corners
- Keep only several corners rounded (top-right, or both at bottom, etc.)
One more great thing is making several blocks the same height. This is not related to rounded corners, but this is a great layout technique. At least we can get rid of Faux Columns!
And of all this is released under GNU GPL license and works in majority of browsers – IE 5.5, IE6 and IE7 beta 2 preview, Opera 8.5, Firefox 1.5 and Safari 2.0. Also, it is backwards compatible – users with old browsers or with turned off JavaScript just don’t see rounded corners.
I didn’t yet have a choice to try Nifty Corners Cube in a real project, but if it will work as intended we can finally get a really great tool that can save a lot of time for web designers.