double border with no space in between

Question

Hi guys, i wanted to make a double border but with no space in between and the double border should be of different color. I tried using image instead but i thought css could probably perform this job for me, i searched the net but hardly find anything close.

What i wanted is total of 2px dotted border with top color of #a4a4a4 and bottom color of #474747.

Any idea how i can do this instead of creating 2 divs?

Answer 1

CSS doesn't support more than one border color per side. If you want two different dotted borders of different colors, you'll need to have 2 different elements each with a different styled border.

Answer 2

Your safest bet will be to use two elements, but if you are into progressive enhancement, you can try this method. It will work in Safari, Chrome FF 3.6+ (Prob 3.5 too), Opera (at least 10.10+), and IE8+ (In IE8 mode). It uses the :after pseudo class to do its magic. Note: it fails to work in FF 3.0 and leaves the extra border, but in IE6 & 7 it just falls back to one border. You can check out a demo of it in action.

HTML

<div id="double">
  <h2>Double Border</h2>
  <p>This div <a href="#">should</a> have two borders.</p>
  <p>There are only normal elements inside.</p>
</div>

CSS

#double {
 border: dotted 1px #a4a4a4;
 padding: 10px;
 position: relative;
}

#double > * {
 position: relative;
 z-index: 100;
}

/* Add an "extra" element using CSS */
#double:after {
 content: "";
 position: absolute;
 z-index: 50;
 border: dotted 1px #474747;
 left: 0;
 top: 0;
 bottom: 0;
 right: 0;
 display: block;
}