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:

Code:

<h2> heading 2 </h2> <p> paragraph text </p>  <h2> heading 2 </h2> <p> paragraph text </p> 

Note: I'm not considering IE 8, 7, 6

Answer 1

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 2

You can do it with the :after pseudo element:

http://jsfiddle.net/aCgAA/

h2 { padding: 5px 0; border-bottom: solid 3px pink; font-weight: bold; position: relative; margin-bottom: 8px; }  h2:after { content: ''; border-bottom: solid 3px blue; width: 100%; position: absolute; bottom: -6px; left: 0; } 

This degrades gracefully to a single line if the :after selector is not available.