It seems that rounded corners are making a comeback in web design (or, maybe it’s just the designers I work with). And there’s not really an easy way about it since the current versions of CSS have no native support for rounding corners (however, I believe something may be in the works for CSS3).
So, what it comes down to is using multiple background images and placing them at each corner (top-left, bottom-left, and so on). Of course, CSS only supports one background image per element, so that doesn’t make things easier. The workaround is simply to use multiple nested elements (such as nested DIVs), each with its own background image.
Nested DIVs can have their own problems, as they can quickly become semantically meaningless (that is, the HTML no longer describes the document’s structure). However, Ryan Thrash has come up with what he calls the ThrashBox — a semantically correct set of HTML & CSS to create rounded corners.
His technique still relies on nested DIVs but he structures them so that the code remains meaningful (one div for the box, one div for the box’s header and one div for the box’s content). It may not be semantically perfect, but I think it’s the best that can be achieved with current CSS. And, the next time I need to create a box with rounded corners, I’ll consider his technique.
Interesting approach. Too bad it depends on having the header in there to get enough elements to style. Not every box you might want to give rounded borders to has a header.
This kind of thing would be soooo trivial with XBL. *sigh*
It fails spectacularly when rendering a calendar, which is basically a ‘table’ tag instead of the first ‘div’ tag. See my post at http://www.swapsphoto.com/blogs/blogger1.php
If you are interested in doing this in a fully automated fashion from CSS (i.e. without manually creating image files), check out my technique here. The CSS/HTML structure I use is not as semantically perfect as the ThrashBox technique, but you can use my automatic corner-image generating PHP script with the Thrashbox CSS/HTML if you prefer.
The nice part is that with the help of one PHP script, you can do everything from within the CSS file, no Photoshop hacking and slashing required – almost as easy as it will one day be with CSS3. I plan to give it the ability to generate line borders as well. And maybe to extend the technique to generate simple drop-shadow effects as well if there’s interest.