How to change color of <hr/> element?

Question

I tried all ways to change color of <hr/>:

hr{
   border-color: yellow;
   background-color:  yellow;
   color: yellow;
  }

but it appears like this in both Chrome and FF:

How can I change its color to pure yellow?

Answer 1

Give hr a style with:

hr{
    border:0;
    margin:0;
    width:100%;
    height:2px;
    background:yellow;
}

or

border:1px solid yellow;

JsFiddle

You need to get rid of the border or change the border's properties for it work.

From @Darko Z in the comments:

In many browsers the default style for HR is to add some sort of shading to the border so this comes out as dirty #whateverColourYouWant. To get rid of it, setting border explicitly (and not just border-color) is necessary.