This article is a good primer on the basic techniques used to make rounded corners with CSS, but as alluded to in the article and in some of the previous comments, there is still room for a lot of improvements.
An ideal solution would be able to style all four corners of the box without requiring extra div or span tags. (Remember that we should be trying to maintain lean, semantic markup here…) Also, it would be nice to be able to accomplish this without JavaScript, but until the major browsers support the CSS3 border-radius property, JavaScript is probably going to be required. (Firefox/Mozilla browsers already support the roughly equivalent -moz-border-radius property.)
In the meantime, if you’re looking for a much better (and more complete) solution than this article provides, check out the following resources:
Richard Davies
This article is a good primer on the basic techniques used to make rounded corners with CSS, but as alluded to in the article and in some of the previous comments, there is still room for a lot of improvements.
An ideal solution would be able to style all four corners of the box without requiring extra div or span tags. (Remember that we should be trying to maintain lean, semantic markup here…) Also, it would be nice to be able to accomplish this without JavaScript, but until the major browsers support the CSS3 border-radius property, JavaScript is probably going to be required. (Firefox/Mozilla browsers already support the roughly equivalent -moz-border-radius property.)
In the meantime, if you’re looking for a much better (and more complete) solution than this article provides, check out the following resources:
Nifty Corners
Transparent custom corners and borders
MochiKit Rounded Corners
These should be enough to get you going. If I’ve left out any other good ones, let me know.