[TUT] Image-less Round borders

[jayfella]

This very small tut shows how to create round borders without using images or tables or CSS3.

Firstly let me explain why image-less borders are better.
For a start, it means you do not have to download the images. It may be 4 or even up to 8 images being downloaded. Depending on the ability of the coder, it could be a sprite, but again, a http request needs to be made, and a (sometimes) large sprite needs to be downloaded.

So this example, an image-less rounded border uses text only, resulting in zero extra http requests and inevitably faster page-loading.

Ok. So the CSS:

There are 2 ways we can do this. One with an outer border-color, and one without.

CSS with border:

<style type="text/css">

.b1f, .b2f, .b3f, .b4f{
    font-size:1px; 
    overflow:hidden; 
    display:block;
    }

.b1f {
    height:1px; 
    background:#888; 
    margin:0 5px;
    }

.b2f {
    height:1px; 
    background:#ddd; 
    border-right:2px solid #888; 
    border-left:2px solid #888; 
    margin:0 3px;
    }

.b3f {
    height:1px; 
    background:#ddd; 
    border-right:1px solid #888; 
    border-left:1px solid #888; 
    margin:0 2px;
    }

.b4f {
    height:2px; 
    background:#ddd; 
    border-right:1px solid #888; 
    border-left:1px solid #888; 
    margin:0 1px;
    }
    
.contentf {
    background: #ddd; 
    border-right:1px solid #888; 
    border-left:1px solid #888;
    }
    
.contentf div {
    margin-left: 5px;
    }
    
</style>

CSS without border:

<style type="text/css">

.b1f, .b2f, .b3f, .b4f{
    font-size:1px; 
    overflow:hidden; 
    display:block;
    }

.b1f {
    height:1px; 
    background:#ddd; 
    margin:0 5px;
    }

.b2f {
    height:1px; 
    background:#ddd; 
    margin:0 3px;
    }

.b3f {
    height:1px; 
    background:#ddd; 
    margin:0 2px;
    }

.b4f {
    height:2px; 
    background:#ddd; 
    margin:0 1px;
    }

.contentf {
    background: #ddd;
    }

.contentf div {
    margin-left: 5px;
    }

</style>

The Main CODE:

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
    <div class="contentf">
        <div>
        KWWHunction ftw.<br />
        Content Goes Here<br />
        </div>
    </div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

And here are the results, depending on which CSS you decided to use:

Border:



No-Border:



The "rounded boxes" can be re-used time and time again in the same code simply by using the main code again and again

jayfella Reviewed by jayfella on 22nd Mar 2010. [TUT] Image-less Round borders This very small tut shows how to create round borders without using images or tables or CSS3. Firstly let me explain why image-less borders are better. For a start, it means you do not have to download the images. It may be 4 or even up to 8 images being downloaded. Depending on the ability of the coder, it could be a sprite, but again, a http request needs to be made, and a (sometimes) large sprite needs to be downloaded. So this example, an image-less rounded border uses text only, Rating: 5