Mar
08
2006Image-Free Rounded Corners in CSS
08
2006
The more i run into them, the more I get obsessed with rounded corners in web design. I’ll let Rich Ziade of Basement.org explain why for me.
In my quest to find the best technique to implement these beasties, I found a fantastic trick which enables you to create rounded corners without using any graphics whatsoever. Dubbed “Nifty Corners” by their creator, this technique is great not only because it saves bandwidth and helps with semantic clarity, it enables you to experiment with different colors without having to create a new graphic every time.
The magic lies in creating a stack of one-pixel high “divs” of varying width above and below a given div. But, to avoid a pile of non-semantic markup, these are added dynamically via JavaScript. Brilliant!
Not content with his original Nifty Corners article, creator Alessandro Fulciniti created an updated version with even more features, including anti-aliasing! (with no images! It’s crazy!)