Rounded Corners Compatible with All Browsers

Example text

To have the above effect, we will use some CSS and Nested Div. For this we will also require images of corners only, like the square image of top left corner etc..

We will start with our CSS.

First all we will need a class which will have a border. It will be bounding box of rounded block.

.rounded {
border: 1px solid #ffffff; /* border in white color */
background-color: #ffffff; /* background color */
zoom:1; /* for IE to work properly */
}

As our initial step, we will have the following stuff.

<div class="rounded" style="width: 200px;">  <div style="padding: 20px;">Example text</div> </div>

This will display a box with straight border in white with white background. Our surrounding is black. Now for corners, we will make a separate class which will have its respective image as background in CSS and positioned at its respective place.

.tl {background: url(tl.gif) no-repeat top left;
margin:-1px; } /* the margin -1 aligns borders with corner images*/
.tr {background: url(tr.gif) no-repeat top right;}
.br {background: url(br.gif) no-repeat bottom right;}
.bl {background: url(bl.gif) no-repeat bottom left;}

For each corner we have a class ready with respective corner image. Now we will just create divs for each corner and apply its class to it as follows:

<div class="tl"><div class="tr"><div class="br"><div class="bl">

     <div style="padding: 20px;"> Example text </div>

</div> </div> </div> </div> </div>

This way we will have a rounded cornered block. It will work in all browsers.

Complete code is as follow::::<style type="text/css"> 
.rounded {  
border: 1px solid #ffffff;  
background-color: #ffffff;  
color: #000000;  
zoom:1; /* causes IE to behave properly */  
}  

.tl {background: url(tl.gif) no-repeat top left;  
margin:-1px; } /* the margin -1 aligns borders with corner images*/  
.tr {background: url(tr.gif) no-repeat top right;}  
.br {background: url(br.gif) no-repeat bottom right;}  
.bl {background: url(bl.gif) no-repeat bottom left;}  

.tr, .tl, .bl, .br {zoom:1;position:relative;} /* for relative positioning of div */

</style>  

<div class="rounded" style="width: 200px;"> 
<div class="tl"><div class="tr"><div class="br"><div class="bl"> 
<div style="padding: 20px;"> Example text </div> 
</div> </div> </div> </div> 
</div>