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

Similar to what ADW said, in fact I'll edit his fiddle to help explain the difference.

In your description you explicitly described h2 followed by p should have the double border in between.

ADW's solution is good enough, only when there is only one p after the h2, but if there is another p, it will have a strange red line between the paragraphs. That's why we should only select the p which is immediately following a h2.

CSS selector for p immediately following h2 is h2 + p

Try this: http://jsfiddle.net/gR4qy/42/

h2 { border-bottom: solid pink;}
h2 + p { border-top: solid blue; }

This is nothing new. It's CSS 2.1! http://www.w3.org/TR/CSS2/selector.html

Unfortunately there's nothing I can think of to get rid of the blue border if the p is missing. You're on your own there :S

Sorry I have to get 50 points before I can comment and I dont know how to get points so I pposted this as a new answer :S