CSS rounded corners using sprites

How this technique is different from other CSS rounded corner techniques? The answer is simple. It uses a single image for all four corners but it is positioned with different x and y values. The browser doesnt have to load all four corner images, which makes page load slower. Using CSS sprites we can save both bandwidth and time because the browser caches the one image and repeats it over in different positions. I used the image below (enlarged) to do the job

-> Top left corner of the box

-> Bottom left corner of the box

-> Top right corner of the box

-> Bottom right corner of the box

Its actual dimensions are 12px by 50px. It looks like a circle cut in half and placed the other half under the first one; actually thats what it is. Be careful while cutting the image from the center. Use Smart Guides if you are using photoshop. To make your work easier and straightforward, you can download the psd or the png.

Moving onto the CSS part.
The main outer box

.outerbox { background-color: rgb(203,76,44); width: 400px; margin: auto; }

A dummy div under the top class, to hold the top left corner

.top div { background: url(corners.png) no-repeat; }

top class to hold the top right corner.
Note: 400px(width of outerbox) - 12px(width of corner itself) = 388px(x-position) and -25px(y-position) to scroll up the image.

.top { background: url(corners.png) no-repeat 388px -25px; }

A dummy div under the bottom class, to hold the bottom left corner

.bottom div { background: url(corners.png) no-repeat 0px -11px; }

bottom class to hold the bottom right corner. Note: -36px

.bottom { background: url(corners.png) no-repeat 388px -36px; }
.top div, .top, .bottom div, .bottom {
width: 100%;
height: 14px;
font-size: 1px;
}

Some aesthetic work

.boxcontent { margin: 0 14px; text-align: center; }
.text { width: 400px; margin: auto; color: rgb(203,76,44); text-align: justify;}
body { font-family: Georgia, "Times New Roman", Times, serif; }
h3 { color: #e6e6e6; }

Blending the CSS into XHTML. The structure would look like this:

<div class="outerbox"> <div class="top"> <div></div> </div> <div class="boxcontent"> <h3>CSS rounded corners using sprites</h3> </div> <div class="bottom"> <div></div> </div> </div>

Now, we are done with most of the part. Only the dtd, html, head, body, etc tags are left, which you can easily put I guess. You can see the working example here.