Jitendra Vyas Jitendra Vyas - 3 months ago 12
CSS Question

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

How to make a double line border in CSS, each line in a different color without using

background-image
?

For example like this:

enter image description here

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

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/