Verecom Web Design Blog

Step 2: HTML Code

Firstly, we will give container a div class .roundBox

<div class=”roundedBox”></div>

Now, we need to add 4 more div, which will be used when we create the four rounded corners. For each corner, we need to specify a div with their position for each.

Here we need to specify the absolute-positioned element, otherwise it will follow the parent relatively-positioned element. If the parent element can not be defined, then it will take the closest element to define its position until the body tag.

Don’t worry if you are still confused, it will become clearer soon.

Now let’s define all the rounded corners:
All rounded corners must be absolute positioned, with height and width defined. In this case, my rounded corners’ height is defined as 17px.

.corner {
position:absolute;
width:17px;
height:17px;
}

Then we should start define container div:

.roundedBox {position:relative;}

All classes defined under .roundedBox will be affected by its property, but not the body tag. Also we must set some value to padding, without this setting, rounded corners will cover our body text. Important notice: value of top and bottom padding must equal to the height of the rounded corner. In the same way, the value of left and right padding must equal to the width of the rounded corner. In this case, all values should be all equal to 17px.

.roundedBox {position:relative; padding:17px; margin:10px 0;}

Last, let us define for the box without rounded corners.

We need to have all rounded corners absolute-positioned, as well as the position of the background image (according to our sprite):

.roundedBox {position:relative; padding:17px; margin:10px 0;}

.corner {position:absolute; width:17px; height:17px;}

.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

You may have noticed, our style has not downloaded the spirte yet, because we have another way to do it, which will be introduced in the next blog.

Edited By Dan Li