CSS Double Border (2 Colors) Without Using Outline?
Answer :
You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1.
I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning.
.border
{
border:2px solid #36F;
position:relative;
z-index:10
}
.border:before
{
content:"";
display:block;
position:absolute;
z-index:-1;
top:2px;
left:2px;
right:2px;
bottom:2px;
border:2px solid #36F
}
http://jsfiddle.net/fvHJq/1/
Use box shadow fo 2nd border.
div.double-border {
border: 1px solid #fff;
-webkit-box-shadow: 0px 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 0px 1px #000;
box-shadow: 0px 0px 0px 1px #000;
}
In this case box-shadow does not ignore border-radius property like outline does
A very simple solution you could use as a fall-back if nothing else would be to use two divs. Your main div, and then an empty one just wrapping it that you could use to set the second border.
Comments
Post a Comment