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

Answer 1

.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

Answer 2

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 3

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 4

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

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