html Code:
<div id="circle"> <span class="include"> <strong class="s1"> </strong> <strong class="s2"> </strong> <strong class="s3"> </strong> <strong class="s4"> </strong> <strong class="s5"> </strong> </span> <span class="bg" style="text-align:center"> Welcome to round corner </span> <span class="include"> <strong class="s5"> </strong> <strong class="s4"> </strong> <strong class="s3"> </strong> <strong class="s2"> </strong> <strong class="s1"> </strong> </span> </div>
CSS Code:
#circle{ margin:50px auto; width:300px; overflow:hidden; }.include{ background:transparent; }.s1,.s2,.s3,.s4,.s5{ font-size:1px; display:block; overflow:hidden; background:#66ccff; }.s1,.s2,.s3,.s4{ height:1px; }.s2,.s3,.s4,.s5{ border-right:1px solid #fff; border-left:1px solid #fff; }.s1{ margin:0 7px; background:#fff; }.s2{ margin:0 5px; border-width:2px; }.s3{ margin:0 3px; border-width:2px; }.s4{ margin:0 2px; }.s5{ margin:0 1px; height:2px; }.bg{ background:#66ccff; border-right:1px solid #fff; border-left:1px solid #fff; display:block; height:100px; overflow:hidden; font-weight:bold; }
