HR with two colors

Question

I'm trying to make an hr with two colors on it, one dark red on the bottom and one orange on the top. An image is attached that gives an example of what I'm trying for. Is there any way to do this using pure CSS?

EDIT: If not, is there a way to set an hr to be an image? Like a png? Something that will stretch for different sizes?

Answer 1

Use CSS with 2 borders like so:

hr {
     border-top: 1px solid gray;
     border-bottom: 1px solid white;
}

Example in JSFiddle.

And to mimic what you have in your picture with text floating on top of the HR, you can do something like this JSFiddle.