How to create rounded box using CSS without image? - CSS Twicks to create rounded div without using image

If your browser supports CSS3 or webkit then it is very easy to create rounded boxes using div using following code.

<style type='text/css'>
.rounded {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   border-radius: 5x;
}
</style>

<div class="rounded">
  This is sample rounded box
</div>

Above code works fine with Firefox, chrome and any other webkit or CSS3 enabled browsers. But does not work on IE which is most commonly used browser, which does not come with CSS3 or webkit support. Many web developer uses image based solution for creation rounded boxes in the webpage, but this approach does not look scalable and reusable. I have simple solution using CSS and multiple div which is easy to scale and reuse it for creating multiple rounded boxes.

<style type='text/css'>

.rounded {
 background: #f1f1f1;
 width:100px;
}

.content {
 height:100px;
}

.top,.bottom {
 display: block;
 background: #FFFFFF;
}

.top *,.bottom * {
 display: block;
 height: 1px;
 overflow: hidden;
 background: #f1f1f1;
}

.t1 {
 margin: 0 5px
}

.t2 {
 margin: 0 3px
}

.t3 {
 margin: 0 2px
}

.t4 {
 margin: 0 1px;
 height: 3px;
}

.b1 {
 margin: 0 1px;
 height: 3px;
}

.b2 {
 margin: 0 2px
}

.b3 {
 margin: 0 3px
}

.b4 {
 margin: 0 5px;
}
</style>

<div class="rounded">
  <span class="top">
  <span class="t1"> </span>
  <span class="t2"> </span>
  <span class="t3"> </span>
  <span class="t4"></span>
  </span>
<div class="content"">This is rounded box</div>
  <span class="bottom">
  <span class="b1"> </span>
  <span class="b2"> </span>
  <span class="b3"> </span>
  <span class="b4"> </span>
  </span>
 </div>

As you see in the above code change the width and height attributes as per your requirements in the style-sheet code, you can also change color as per your requirements (To change the color replace #FFFFFF with your background color of your web page and replace #f1f1f1 with desired color of rounded box)
You can write your own content within rounded box by replacing following lines in the above code

<div class="content"">This is rounded box</div>