[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

[Nemesis]

Thanks for this jay.

[Sandino]

Nice!

Does this work in IE?

I have a method of doing this, but it won't work in IE Lol.


Ps - FIX YOUR SITE lol.

[CJ]

I accept it, I love ur knowledge mate.

[jayfella]

Nice!

Does this work in IE?

I have a method of doing this, but it won't work in IE Lol.


Ps - FIX YOUR SITE lol.

Yep, it works in every single browser going

[raflamo]

thanks jayfella

[litewarez]

nice tutorial and this will work ion all browsers but for a simpler solution on web-kit and firefox - this is chrome,ffx,safari and alot of other browsers you can do the following

.round{
-moz-border-radius-topleft:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-webkit-border-top-right-radius:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-webkit-border-bottom-right-radius:2px;
}

<div class="round">Litewarez</div>

this will produce the same effect for most browsers apart from IE!

[jayfella]

yeah ^^ . wish it worked on IE. would make things so much simpler for us.

[Sandino]

nice tutorial and this will work ion all browsers but for a simpler solution on web-kit and firefox - this is chrome,ffx,safari and alot of other browsers you can do the following

.round{
-moz-border-radius-topleft:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-webkit-border-top-right-radius:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-webkit-border-bottom-right-radius:2px;
}

<div class="round">Litewarez</div>

this will produce the same effect for most browsers apart from IE!

yep.
that's what i use

[BlaZe]

Thanks Lite !
I really your posts