CSS double border (2 colors) without using outline?

Question

I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this?

This is what I had but outline does not work with IE: outline: 2px solid #36F; border: 2px solid #390;

Thanks.

Answer 1

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/

Answer 2

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

Answer 3

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.

Answer 4

Late to the party for this question, but I feel like I should record this somewhere. You can make a scalable function in something like Less or Stylus which will create any number of borders (Stylus here):

abs(n)
    if n < 0
        (-1*n)
    else
        n

horizBorder(n, backgroundColor)
    $shadow = 0 0 0 0 transparent
    $sign = (n/abs(n))
    for $i in ($sign..n)
        /* offset-x | offset-y | blur-radius | spread-radius | color */
        $shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
    return $shadow

Then,

$background: #FFF // my background was white in this case and I wanted alternating black/white borders

.border-bottom
    box-shadow: horizBorder(5, $background)
.border-top
    box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
    box-shadow: horizBorder(5, $background), horizBorder(-5, $background)

Answer 5

With box-shadow you can achieve as many different color borders as you want. E.g:

#mydiv{
  height: 60px;
  width: 60px;
  box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}

<div id="mydiv">&nbsp;</div>

https://jsfiddle.net/aruanoc/g5e5pzny

Answer 6

A little trick ;)

box-shadow: 
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;

Answer 7

.border{
  width: 200px;
  height: 200px;
  background: #f06d06;
  position: relative;
  border: 5px solid blue;  
  margin: 20px;
}
.border:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: green;
  z-index: -1;
}

<div class="border">
  
</div>

use the class name for .border given the vales border:2px solid #000 for single border.then you want another border try to .border:after given the values if you got second border check out above the code sample example