double border with no space in between

i wanted to make a double border but with no space in between and t开发者_如何学JAVAhe 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?

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.

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