Rounded Corners Without Images

Rounded corners is one of the most popular & frequently requested CSS techniques. Rounded Corners Without Images - What is it all about? It's a method of creating rounded corners of an element without using images, just with a piece of JavaScript and few drops of CSS.

In below example, you will notice that we have created four classes named row1, row2, row3 & row4. To each row we have given left & right margin from top to bottom position, in which the margin goes on decreasing as row increases. And for bottom to top position, the order becomes vice versa i.e. the margin goes on increasing as row increases.

a b c d

Rounded Corners Without Images

XHTML

<div id="contant>
<b class="rowtop">>
  <b class="row1"></b>
  <b class="row2"></b>
  <b class="row3"></b>
  <b class="row4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
  <b class="row4"></b>
  <b class="row3"></b>
  <b class="row2"></b>
  <b class="row1"></b>
</b>
</div>

CSS

.contant{
  width:300px;
  background: #E8050B;
  text-align:center;
  margin:auto;
}
.contant p{
  margin: 2px 20px;
  color:#FFFFFF;
  font-weight:bold;
}
b.toprow, b.bottomrow{
  display:block;
  background: #FFF
}
b.toprow b, b.bottomrow b{
  display:block;
  height: 1px;
  overflow: hidden;
  background: #E8050B
}
b.row1{
  margin: 0 5px;
  background: #FFF
}
b.row2{
  margin: 0 3px
}
b.row3{
  margin: 0 2px
}
b.toprow b.r4, b.bottomrow b.r4{
  margin: 0 1px;
  height: 2px
}

Many inline elements are used to create rounded corner, out of which one of them is bold tag <b>.

Why to use html bold tag <b>?
An inline element is needed to obtain the rounded corners, since it can be used in almost every kind of tag which maintains the markup valid. So the choice certainly fell on because it does'nt have semantical meaning & its shorter than span.