7/23/13 CSS: two color borders - Stack Overflow

CSS: two color borders

Client wants two color borders for an embossed look. Can I do this on one element? I was hoping to
avoid stacking two DOM elements with individual borders.

css border

edited Oct 11 '10 at 14:44 asked Oct 11 '10 at 14:10

BoltClock ♦ DrANoel
178k 33 368 627 1,102 2 13 26

Are you willing to use Javascript to achieve the effect? jquery.malsup.com/corner – nopuck4you Oct 11 '10 at
17:34

10 Answers

Yep: Use the outline property; it acts as a second border outside of your border. Beware, tho', it can
interact in a wonky fashion with margins, paddings and drop­shadows. In some browsers you might
have to use a browser­specific prefix as well; in order to make sure it picks up on it: ‐webkit‐outline
and the like (although WebKit in particular doesn't require this).

This can also be useful in the case where you want to jettison the outline for certain browsers (such as is
the case if you want to combine the outline with a drop shadow; in WebKit the outline is inside of the
shadow; in FireFox it is outside, so ‐moz‐outline: 0 is useful to ensure that you don't get a gnarly
line around your beautiful CSS drop shadow).

.someclass {
border: 1px solid blue;
outline: 1px solid darkblue;
}

Edit: Some people have remarked that outline doesn't jive well with IE < 8. While this is true;
supporting IE < 8 really isn't something you should be doing.

edited Oct 11 '10 at 14:56 answered Oct 11 '10 at 14:17

Williham Totland
13.1k 1 20 38

24 ­1 for "supporting IE < 8 really isn't something you should be doing". Not supporting IE6 may be fine. But
not supporting IE7 is ridiculous, no site with a non­technical audience can afford this – Pekka 웃 Oct 11 '10
at 14:36

1 outline has been around since CSS2. – BoltClock ♦ Oct 11 '10 at 14:45

69 +1 for not supporting IE 7, while your site should always work and look reasonably well in IE 7, full support
is not necessary. especially if it's just a two color border. i'm personally using box­shadow and other
'advanced' features. IE7 can't see a box­shadow, ... big deal. there is no reason to use a less suited, overly
complicated, or even outdated solution, just to work around IE7s quirks. – Marian Theisen Sep 30 '11 at
19:57

1 Also, see this reference for good accessibility reasons NOT to hack the outline property for design
purposes: outlinenone.com – Joel Glovier Jun 14 '12 at 16:23

2 A word of caution, outline is less versatile than border. In particular, W3C says: "Note. The outline is
the same on all sides. In contrast to borders, there is no 'outline­top' or 'outline­left' property."
(Emphasis mine.) – BobStein­VisiBone Feb 20 at 3:05

show 1 more comment

This is very possible. It just takes a little CSS trickery!

jsFiddle

<div class="border">
Hi I have two border colors<br />
stackoverflow.com/questions/3906983/css-two-color-borders 1/4
7/23/13 CSS: two color borders - Stack Overflow
Hi I have two border colors<br />
I am also Fluid
</div>

div.border {
border: 1px solid #000;
position: relative;
}
div.border:before {
position: absolute; display: block; content: '';
border: 1px solid red;
height: 100%; width: 100%;
box‐sizing: border‐box; ‐moz‐box‐sizing: border‐box; ‐webkit‐box‐sizing: border‐box;
}

Is that what you are looking for?

edited Apr 9 at 14:59 answered Sep 30 '11 at 19:37

Rory O'Kane rkingon
1,991 10 29 255 2 7

Indeed it's tricky, but it degrades gracefully and even works on my HTC's stock browser (Android)! If you use
border‐radius, try reducing the inner border's radius by one pixel, that will make the gap between the two
rounded borders nearly unnoticable. – flu Nov 22 '11 at 16:14

I'm using this ­ and it works GREAT! – Fruxelot Oct 24 '12 at 14:43

This is nice. Using bottom:1px rather than height:100% worked better for me for just a bottom border :) –
Nick Jan 19 at 6:14

Another way is to use box‐shadow:

#mybox {
box‐shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
‐moz‐box‐shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
‐webkit‐shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
}

<div id="mybox">ABC</div>

See example here.

answered Oct 11 '10 at 14:27

livibetter
2,543 1 9 19

+1, this is great, but will not work in any IE .. – Gaby aka G. Petrioli Oct 11 '10 at 18:23

Fortunately now works in IE9: jsbin.com/eyasuk/1. – Timo Dec 15 '12 at 21:43

Have you tried the different border styles available within the CSS spec? There's already two border
styles that might accommodate your need:

border‐style: ridge;

Or

border‐style: groove;

answered Oct 11 '10 at 17:27

Joel Glovier
1,339 1 16 45

1 This was exactly what I needed. (Fixing <fieldset> in IE8) – DOOManiac Nov 30 '11 at 17:37

stackoverflow.com/questions/3906983/css-two-color-borders 2/4
7/23/13 CSS: two color borders - Stack Overflow

Instead of using unsupported and problematic outline for images just use background color + padding
for first border and normal border for second
answered Sep 13 '12 at 17:23
Karol Horosin
21 1

If by "embossing" you mean two borders around each other with two different colours, there is the
outline property ( outline‐left, outline‐right....) but it is poorly supported in the IE family
(namely, IE6 and 7 don't support it at all). If you need two borders, a second wrapper element would
indeed be best.

If you mean using two colours in the same border. Use e.g.

border‐right: 1px white solid;

border‐left: 1px black solid;
border‐top: 1px black solid;
border‐bottom: 1px white solid;

there are special border‐styles for this as well ( ridge, outset and inset) but they tend to
vary across browsers in my experience.

edited Oct 11 '10 at 14:40 answered Oct 11 '10 at 14:13

Pekka 웃
208k 39 361 587

3 I believe what he is asking is something like border : black white; which means defining two different
colors for one border which looks sequentially at the same time. – Tarik Oct 11 '10 at 14:15

1 @Braveyard ah, I see. That would be theoretically possible using outline but it won't work well in IE < 8 –
Pekka 웃 Oct 11 '10 at 14:18

3 Note that there is only outline... there is no such thing as outline­left, outline­right, outline­top, or outline­
bottom unfortunately. – dhsto Jun 29 '12 at 0:41

Not possible, but you should check to see if border‐style values like inset, outset or some
other, accomplished the effect you want.. (i doubt it though..)

CSS3 has the border­image properties, but i do not know about support from browsers yet (more info at
http://www.css3.info/preview/border­image/)..

answered Oct 11 '10 at 14:17

Gaby aka G. Petrioli
65.1k 7 50 95

Nothing is impossible in programming world :P well I like making this statement all the time :) – Tarik Oct 12 '10
at 1:06

@Braveyard, chuckle good point :) – Gaby aka G. Petrioli Oct 12 '10 at 9:42

Simply write

style="border:medium double;"

for the html tag

answered Oct 11 '10 at 14:23

Wazzzy
3,887 1 14 49

1 That gives two borders with but one color between them. – Williham Totland Oct 11 '10 at 14:25

You could use

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two‐colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border‐color: rgba(111,111,111,0.2) transparent;
padding: 4px; outline: 1px solid green;
stackoverflow.com/questions/3906983/css-two-color-borders 3/4
7/23/13 CSS: two color borders - Stack Overflow
}

</style>

<style type="text/css">
body {
padding‐top: 20px;
padding‐bottom: 40px;
background‐color:yellow;
}
</style>

</head>
<body>
<a target="_blank" href="people.htm">
<img class="two‐colors" src="people.jpg" alt="Klematis" width="213" height="120" />
</a>

</body>
</html>

answered May 7 '12 at 17:55

sed
395 4 15

This produces a nice effect.

<div style="border: 1px solid gray; padding: 1px">

<div style="border: 1px solid gray">
internal stuff
</div>
</div>

answered Aug 2 '12 at 18:34

SorcyCat
738 4 14

Not the answer you're looking for? Browse other questions tagged css border or ask
your own question.

stackoverflow.com/questions/3906983/css-two-color-borders 4/4