Rounded box model (blue)

HTML code:

<div class=”roundedBox” id=”type1″>
<strong>My content in roundedBox Type 1</strong>

<div class=”corner topLeft”></div>
<div class=”corner topRight”></div>
<div class=”corner bottomLeft”></div>
<div class=”corner bottomRight”></div>
</div>

we need a container div to implement a special background, we will name its ID #type1.

CSS code:
First, we need to match #type1 with a background colour, so that it can fit into the rounded corners in the sprite.

#type1 {background-color:#CCDEDE;}

Then, load sprite into the rounded box through defining .corner class.

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../images/corners-type1.gif);}

Now we have our first rounded rectangle.

Edited By Dan Li