Rectangular boxes get boring ... so we try to spice them up

Using the basic possibilities of a CSS-based design, a layout often ends up using a lot of rectangular boxes. This is by far the most straight-forward approach, as all it takes is setting the background of your div to a nice color and maybe use a border as an additional touch. Now this looks good in a lot of situations and is still a very good choice if you are after this certain plain and serious look of your website.
But not always do we want this, so we start looking for ways of customizing the look of the structural elements on the page. Very popular and sought after are rounded corners for example. If you are somewhat fluent with CSS elements, you know that there is an implementation for rounded corners coming up in CSS3 (“border-radius” property). But alas, this most recent version of the CSS specification is still the future and we are happy to have CSS2 coming along with the latest generation of web browsers.
So, for now the webdesigner has to fall back to the use of graphics that are placed in the corners of the box to achieve the effect of a rounded corner. For the actual implementation, there are more than just a handful of ways to do the placement of the corner-graphics. The problem is, you have four corners (= four graphics) but only one of these you can place as the background of your div. And you will really want to have the images in the CSS and not the HTML. So how do we go about the remaining 3 corners?
Well, as mentioned earlier there are different approaches. One would be to use nested div’s in the HTML. These div’s inside the div you want to style with rounded corners only have the purpose of holding the graphics needed to do so. This is pretty straight-forward and works well across different browsers. A good write up and explanation of this method can be found in the article Rounded corners in CSS by Adam Kalsey. However, this technique is cluttering your HTML with semantically unnecessary div’s.
It is also possible to assign the background images to the content of your div. Thus, the headline is assigned the upper right corner graphic for example, a link at the bottom the lower left graphic, and so on. An implementation of this idea can be seen here. However, this approach is still showing some flaws with smaller window sizes in IE, that seem to break the arrangement.
More information on this subject can be found on Eric Meyers CSS pages or in this listing

The bottom line is, you probably have to find a method that fits your special needs and make that work. There is no universial solution to the problem of styling your div’s with rounded corners. As with a lot of things in the world of CSS design, there is more than one way to achieve the effect you need.