How to create rounded corner box using CSS

For a long time web designers were using table tags to create rounded corner tables or boxes. They all used the same method, three rows by three columns to be able to create flexible tables with rounded corner. This way is absolutely gone and we are no longer using it now, we are using the CSS method, which is easier and faster.


ONE
First thing is to prepare all your rounded corner images


Then create a normal <div> box
HTML:
<div class="box"></div>

CSS:
.box {width:200px; height:200px; background-color:#FFFFFF;}



TWO
After that we add the top left background to it, or whatever corner you would like to add. The CSS will be:
.box {
width:200px;
height:200px;
background-color:#FFFFFF;
background-image:url(images/tLeft.gif);
background-position:top left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

This is your progress till now:




THREE
Create another <div> tag inside the first one and add the top right background to it.
HTML:
<div class="box"><div class="tRight">
</div></div>

CSS:
.box {
width:200px;
height:200px;
background-color:#FFFFFF;
background-image:url(images/tLeft.gif);
background-position:top left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.tRight
{
width:200px;
height:200px;
background-image:url(images/tRight.gif);
background-position:top right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

This is your progress till now:




FOUR
Create another <div> tag inside and add the bottom Right background to it.
HTML:
<div class="box"><div class="tRight"><div class="bRight">
</div></div></div>

CSS:
.box {
width:200px;
height:200px;
background-color:#FFFFFF;
background-image:url(images/tLeft.gif);
background-position:top left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.tRight
{
width:200px;
height:200px;
background-image:url(images/tRight.gif);
background-position:top right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.bRight
{
width:200px;
height:200px;
background-image:url(images/bRight.gif);
background-position:bottom right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

This is your progress till now:



FIVE and the LAST STEP
The last corner to add, do the same and add the forth <div> tag inside with the bottom left corner in the backround of it.

HTML:
<div class="box"><div class="tRight"><div class="bRight"><div class="bLeft">
</div></div></div></div>

CSS:
.box {
width:200px;
height:200px;
background-color:#FFFFFF;
background-image:url(images/tLeft.gif);
background-position:top left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.tRight
{
width:200px;
height:200px;
background-image:url(images/tRight.gif);
background-position:top right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.bRight
{
width:200px;
height:200px;
background-image:url(images/bRight.gif);
background-position:bottom right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.bLeft
{
width:200px;
height:200px;
background-image:url(images/bLeft.gif);
background-position:bottom left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

This is your final output:



EXAMPLE
The online HTML example here