This technique is no longer needed – we have HTML5 and CSS3 and support for border-radius now.

There are many techniques for putting rounded corners on a box. All of them require some deviation from the ideal of clean, semantic (X)HTML for structure, CSS for presentation and scripting for behaviour.

The technique of placing corner images directly in a page goes against the idea that CSS should be used for presentation and reduces flexibility (no style-switching). Techniques that use JavaScript seem like overkill to me, and the resulting page code is often the same anyway.

Best let CSS handle it. The cleanest and most concise way I have found uses four <div> elements to call the corner images from a stylesheet.

The code for the page.

<div id="container">
<div class="nw"><!-- --><div class="ne"><!-- --></div></div>
<p>Content</p>
<div class="sw"><!-- --><div class="se"><!-- --></div></div>
</div>

The code for the stylesheet.

.nw, .ne, .sw, .se { height: 15px; }
.nw { background: url(nw.gif) no-repeat top left; }
.ne { background: url(ne.gif) no-repeat top right; }
.sw { background: url(sw.gif) no-repeat bottom left; }
.se { background: url(se.gif) no-repeat bottom right; }

Pretty straightforward. Using empty <div> elements for presentation like this looks a bit messy but I do not think it is incorrect. The comments are added because some browsers will add default dimensions to an empty <div>. The <div> elements are nested so that there is no need to declare a width on the classes.