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;
}