Question

I know it is possible to style a <hr> element, however I don’t know how to achieve following look:

it might be hard to see, basically it should look like (going in horizontal drection) 5px dark brown, light brown, 5px dark brown, also there is background in the image around hr to make it stand out more, it is not part of design. Is this achievable with css (if so how) or do I need to use graphics?

Answer 1

Here is one way:

<hr style="border:0;height:1px;background: #dfded9; border-right: 5px solid #b2b1ae;border-left: 5px solid #b2b1ae">

http://jsfiddle.net/KvGKV/