Rounded corners using CSS [with out Images]

 

This post is completely based on pure Html and css.

the implementation is completely based on mathematics – geometry :-)

to achieve this we need to write some hack in xhtml as

<div class="container">
 <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
 Curved coners with out images !!!!!!!!! <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
 </div>

we are putting multiple <b> tags by means of creating different lines with descending widths.

now come the css implementation ,

 we are setting different width settings for <b> tags. as 

.r1{margin: 0 5px}
 .r2{margin: 0 3px}
 .r3{margin: 0 2px}
 .r4{margin: 0 1px; height: 2px}

i.e. r1 , the top <b> tag has less width and more margin compared to the below one.

Attaching sample source code also with this post  https://docs.google.com/leaf?id=0B9WPg7HFu_8dNGU2NGU3YzItOWVhNC00NTEzLThmYWEtMTM3NzVmNDk4ZTM4&sort=name&layout=list&num=50

Sample Preview :