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.

albert · Accepted Answer · 2019-11-27T20:12:59.370

43

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/

edited Nov 27 '19 at 20:12

answered Feb 06 '13 at 18:05

albert

8,112
3
47
63

3

For reference, this doesn't work with IE7 (which doesn't understand `:before` in most cases, if any). Should be fine with IE8 and later, though...and it doesn't require messing with the HTML. :) – cHao Feb 06 '13 at 18:46
1

@Jack, just pointing out that this solution was number 2 in the link I had sent you detailing multiple different ways. – Nick Mitchinson Feb 07 '13 at 00:37
you can use it in ie7 here http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7 – albert May 07 '15 at 06:24

Vitali Protosovitski · Answer 2 · 2016-09-12T14:49:13.980

8

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

edited Sep 12 '16 at 14:49

answered Aug 18 '15 at 14:07

Vitali Protosovitski

543
4
10

score 2 · Answer 3 · answered Feb 06 '13 at 17:52

2

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.

answered Feb 06 '13 at 17:52

Nick Mitchinson

5,452
1
25
31

Yeah that was what I was going to do. Just curious if there is some easy CSS I'm overlooking to do it. – zProgrammer Feb 06 '13 at 17:57
1

Not that I know of. I assume you're already read this, but just incase: http://www.impressivewebs.com/multiple-borders-css/ – Nick Mitchinson Feb 06 '13 at 18:05

score 0 · Answer 4 · answered Mar 06 '16 at 16:26

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)

score 0 · Answer 5 · answered Jan 25 '17 at 15:42

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

score 0 · Answer 6 · answered Feb 15 '17 at 22:52

0

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;

answered Feb 15 '17 at 22:52

TheCrazyProfessor

919
1
15
31

score 0 · Answer 7 · answered Aug 16 '17 at 07:41

.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

CSS double border (2 colors) without using outline?

7 Answers7

Linked