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.