Advertisement
Advertisement


Changing the color of an hr element


Question

I want to change the color of my hr tag using CSS. The code I've tried below doesn't seem to work:

hr {
    color: #123455;
}
2018/12/28
1
793
12/28/2018 1:22:20 PM

Accepted Answer

I think you should use border-color instead of color, if your intention is to change the color of the line produced by <hr> tag.

Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color (as @Ibu suggested in his answer).

HTML 5 Boilerplate project in its default stylesheet specifies the following rule:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

An article titled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr> can set its border-color to its parent's color if you specify hr { border-color: inherit }.

2020/03/30
1141
3/30/2020 11:14:44 AM

  • border-color works in Chrome and Safari.
  • background-color works in Firefox and Opera.
  • color works in IE7+.
2018/12/28

I think this can be useful. this was simple CSS selector.

hr { background-color: red; height: 1px; border: 0; }
<hr>

2020/07/14

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

Doing it this way allows you to change the height if needed. Good luck. Source: How To Style HR with CSS


Tested in Firefox, Opera, Internet Explorer, Chrome and Safari.

hr {
    border-top: 1px solid red;
}

See the Fiddle.

2018/12/28

Only border-top with color is enough to make the line in different color.

hr {
    border-top: 1px solid #ccc;
}
2018/12/28

Source: https://stackoverflow.com/questions/6382023
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]