Search code examples
htmlcsshorizontal-line

Change hr style in HTML page

I tried changing the <hr> tag with CSS using:

hr { color:whitesmoke}

But it doesn't affect my HTML at all. Is there a way to change the horizontal line's color to a different color than the default one using CSS? For performance purposes, I don't want to use an img (horizontal line in the color I want with max-width: 100%) but some CSS rule.

Solution

  • The appearance of <hr> in the browser is based on border styles and not dictated by the color property. Therefore, try using border-color instead:

    hr {
  border: none;
  border-top: 1px solid whitesmoke;
}
    <hr>