How to make double lines border in CSS, each line in different color, without using background image?

Question

How to make a double line border in CSS, each line in a different color without using background-image?

For example like this:

Answer 1

it is possible in CSS3 very easily. try with the following code

h2
{
  border-bottom: 2px solid blue;
  -moz-box-shadow: 0px 2px 0px #ff0000; /* Firefox 3.6 and earlier */
  -webkit-box-shadow: 0px 2px 0px #ff0000; /* Safari and Chrome */
  box-shadow: 0px 2px 0px #ff0000;
}

Answer 2

I don't think there is a way to do this without an additional element.

There's outline, but it doesn't allow a outline-bottom rule: An outline can only be identical on all four sides.

The :after pseudo-class will allow the adding of text content only, no elements.

Here's how to do it with an additional hr.

Answer 3

Just had to do this, we're implementing a two-tone shadow in our app. Being an mobile app we want to avoid box-shadow (performance) so an even simpler solution using :after, where its absolutely positioned based on its parent is:

 :after{
   content: '';
   display: block;
   height:0;
   border-top: 1px solid rgba(0, 0, 0, .1);
   border-bottom: 2px solid rgba(0, 0, 0, .05);
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 100%;
 }

Answer 4

I just found the way on google search and it's working good for me.

h2 {
    border-bottom: 1px solid blue;
    box-shadow: 0 1px 0 red;}

Source : http://www.cvwdesign.com/txp/article/425/useful-tip-for-creating-double-borders-with-css3

Edit : I found another way to achieve multiple border using CSS 2.1 pseudo-elements

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Answer 5

Have you try add a <span> between <h2> and <p> with the following css:

span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}