[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>
        wJunction 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

 

[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. (y)

 

[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 <3 your posts :D

 

[Dman]

Awesome didn't know about one you posted Jay :P Seriously all browsers should support CSS 3 or die.

 

[shadow.prx]

i use the way litewarez posted and tbh i couldn't give a flying fuck about ie

 

[litewarez]

Well if your using the jQuery libary in your site you could add some kind js rounded such as

$.fn.roundme = function($)
{
   $(this).each(function(e){
       if($.browser.ie){
           $(e).addClass('ie_round');
       }else{
           $(e).addClass('round');
       }
   })
}

/*Use with standerd jQuery*/
$("div[rel=*'roundable']").roundme();

and html as

<div rel="roundable">Litewarez</div>

 

[-Im.z2ight-]

All browsers need to support css it's so annoying when they don't.

 

[Metelci]

Very useful tip. Thank you litewarez

 

[FancyPants]

Jay how would i change the color of the button? Do i change all three of the color codes?

 

[mRAza]

nice little tut jay for simple code, going to use in my new design thanks

 

[n4pst3r]

thnx...nyyyc post...

 

[Loget]

Gracias Jayfella & Litewarez.

 

[Amz]

Nice tutorial mate I knew how to do it for Firefox and Webkit browsers but didn't know but not IE. It's gonna be useful!