CSS Sprites for Rounded Corners

In HTML coding rounded corners boxes are frequently encountered. Over the years CSS/HTML coders have used DIVs to implement rounded corners. In my article Rounded Corners Without DIVs, I have shown how to implement rounded corners using unordered Lists (ul).  In this article, I’m going to show how to use an advance concept of Css Sprites and html to code a rounded corner box.

Lets Plan

Assume you are supposed to code the rounded corner box shown below, using CSS Sprites and HTML.

How will you build the CSS Sprite?

You can use Photoshop or any other image editing tool to cut-up the top and bottom slices. Then use the same edit or to merge the two slices like shown below. For the middle part you can slice a 1px image to repeat it vertically.

Middle background

Now you are ready with Css Sprite images. Let’s build the HTML codes required for the rounded box.

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Let me show you how css code will going to look like.

/* Ul main tag style class */
ul{list-style-type:none;float:left;width:400px;clear:both;}

/* Common list item styles */
ul li{height:10px;float:left;width:400px;
background-image:url(images/html-sprite.jpg);overflow:hidden;}    

/* Box Middle css style class*/
.m{height:400px;background-image:url(images/m.jpg);}

/* Box bottom css style class */
.b{background-position:0 -11px;}

Let me explain more about the css code. Here I have used the UL tag as the main floated container for the list items. Since the layout has a fixed width, included the specific width to main container too. I have used the list-stlye-type:none; to remove the list bullet.

Now comes the most important part of css coding. That is grouping common css styles of the list items into one class. Here I have identified set of css properties as common for all list items at second slot. By doing this we can avoid style property repeats and will reduce the size of the style sheet that will give a performance boost. This style will have another big advantage that is, now we don’t need a separate style class for top. This style class will do the job.

The third set of css code responsible for styling the middle part of the box. there I’m using the 1px image as the background.

Fourth style class will style the bottom part of the box. Look this the place you can see the css Sprite in action. Now the there is no extra web request to bring another image to style the background it used the same image that we used to style the top. the trick is to mimic the background position to lift the image to correct place using css property backgroud-position. By doing css coding like this you can save millions of request to the server.

You can see the real world example Css Sprite rounded box here.

Happy coding!