Pure CSS rounded corners without images and javascript

In this article I will show you how to make a rounded corner boxes without using images or javascript. We will use pure CSS2 only. However, some browsers support border radius property of CSS3.

This trick will apply to all browsers including IE6 which is know as headache for web developers.

Now you can make rounded corders using pure CSS that is consistent across browsers.

UPDATE: For bigger radius, increase number or span tags below and above with different class and increase margin to its css like this:

For more radius:

<div class="container">
    <span class="round_span7"></span>
    <span class="round_span6"></span>
    <span class="round_span5"></span>
    <span class="round_span4"></span>
    <span class="round_span3"></span>
    <span class="round_span2"></span>
    <span class="round_span1"></span>
    <div class="content">
        <!-- Content goes here --> My name is Bond
        <br/>
        James Bond
    </div>
    <span class="round_span1"></span>
    <span class="round_span2"></span>
    <span class="round_span3"></span>
    <span class="round_span4"></span>
    <span class="round_span5"></span>
    <span class="round_span6"></span>
    <span class="round_span7"></span>
</div>

CSS:

<style type="text/css">
 
    .container {
        display: block;
    }
 
    .content {
        background: #ccc;
    }
    .round_span7 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 7px;
    }
    .round_span6 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 6px;
    }
    .round_span5 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 5px;
    }
    .round_span4 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 4px;
    }
 
    .round_span3 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 3px;
    }
 
    .round_span2 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 2px;
    }
 
    .round_span1 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 1px;
    }
</style>

Valid XHTML | Demo