CODEWITHSUNDEEP
htmlcsscolors
Majid
Majid

Reputation: 14243

How to change color of <hr/> element?

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:

y

How can I change its color to pure yellow?

Upvotes: 4

Views: 25377

Answers (2)

Aaron nevalinz
Aaron nevalinz

Reputation: 17

To change the color of your horizontal rule, in your <hr/> tag, type the html attribute color="". Then you can go ahead giving it the desired color.

Upvotes: 0

Albzi
Albzi

Reputation: 15609

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.

Upvotes: 11

Related Questions