Curved corner with CSS

People these days go for more of a soft look to their pages with rounded corners every where. One of the best way of designing rounded corner box is by using div and CSS combination. Here is a sample code for the same...


<style type="text/css">.divRegistraionCntCrvc{ width :100%; background-color: #FFFFFF;} .divRegistraionCntCrvxtop,.divRegistraionCntCrvxbottom { display:block; background:transparent; font-size:1px;} .divRegistraionCntCrvxbcontent { display:block; padding: 5px 10px;} .divRegistraionCntCrvxb1,.divRegistraionCntCrvxb2,.divRegistraionCntCrvxb3,.divRegistraionCntCrvxb4 { display:block; overflow:hidden; } .divRegistraionCntCrvxb1,.divRegistraionCntCrvxb2,.divRegistraionCntCrvxb3 { height:1px;} .divRegistraionCntCrvxb2,.divRegistraionCntCrvxb3,.divRegistraionCntCrvxb4,.divRegistraionCntCrvxbcontent { border:solid #398CD3; border-width:0 1px; background: #fff;} .divRegistraionCntCrvxb1 { margin:0 5px; background:#398CD3; } .divRegistraionCntCrvxb2 { margin:0 3px; border-width:0 2px; } .divRegistraionCntCrvxb3 { margin:0 2px; } .divRegistraionCntCrvxb4 { height:2px; margin:0 1px; }</style><br />


Inside the body tag write as follows.


<div class="divRegistraionCntCrvc"><br /> <b class="divRegistraionCntCrvxtop"><b class="divRegistraionCntCrvxb1"></b><b class="divRegistraionCntCrvxb2"></b><b class="divRegistraionCntCrvxb3"></b><b class="divRegistraionCntCrvxb4"></b></b><div class="divRegistraionCntCrvxbcontent"><p>Your Content Here</p></div><b class="divRegistraionCntCrvxbottom"><b class="divRegistraionCntCrvxb4"></b><b class="divRegistraionCntCrvxb3"></b><b class="divRegistraionCntCrvxb2"></b><b class="divRegistraionCntCrvxb1"></b></b></div><br />


Just change the color according to your requirement.