Double Border Stuff - Playing with CSS

Yesterday i was in a hurry to create some fast CSS, so a copy&paste frenzy just came in, and i discovered a maybe usefull way for putting double border. Lets look at it more carefully:

Imagine you have a div:


Hi Im unique



Now lets put some css to make it pretty


div#Unique{
background:#0033CC;
border:10px outset #ccc;
color:white;
}


Ok, maybe not sooo pretty,anyway we will have something like this:

Hi Im unique



What if we put some more border options in here, something like:


div#Unique{
background:#0033CC;
border:10px outset #ccc
border-top:15px double outset #ccc;
border-bottom:15px double #ccc;
color:white;
}


Walla!!!. Our DIV get a makeover and finish like this:

Hi Im hell more unique :P


Notice that here this:


div#Unique{
border:red;
}

is equal to say:


div#Unique{
border-left:red;
border-right:red;
border-top:red;
border-bottom:red;
}


So is nothing new but you can create a beatifull effect using only pure CSS.

Better yet i was testing it and its seems like it work on Firefox 3, Opera 9.5 and believe it or not in IE 6.0!!!. That just some kick-ass CSS!!!. Well not really but it may be helfull. See ya next deculture ^^

No comments: