Color inheritance on the hr element

[atjn]

Description

If I am writing a document, I would like my <hr> elements to be the same color as my text. I can apply the following CSS to ensure that always happens:

hr {
  color: inherit;
}

Unfortunately, this is not supported in Chromium. There is no good way to achieve this behavior outside of hacks or setting a color directly on the element, which is not as composable.

WPT tests to include

There is currently no WPT test for the hr element, but I have proposed one: https://github.com/web-platform-tests/wpt/pull/48254

It is also likely that the following WPT test can work as an indirect test of this issue: css/css-color/border-color-currentcolor.html

Specification

https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2

Additional Signals

Developer activity

There is a stackoverflow question from 13 years ago that still sees activity: https://stackoverflow.com/questions/6382023/changing-the-color-of-an-hr-element

Workarounds

Many popular CSS reset libraries try to apply color inheritance, with varying success:

• CSS remedy applies a workaround to make the color inheritance work: https://github.com/jensimmons/cssremedy/blob/af14bf33097668201441cafabe02072143fcb364/css/remedy.css#L99..L115
• normalize.css applies color inheritance and seems to ignore that it does not work in Chromium: https://github.com/csstools/normalize.css/blob/23b18687d9bbaa8ef108064cd3f11c0941ec697e/normalize.css#L41..L50
• modern-normalize used to have the same reset as in normalize.css, but it was removed because it did not work in Chromium: https://github.com/sindresorhus/modern-normalize/pull/75/files

Bugs

There is a long standing bug in Chromium that should fix this: https://issues.chromium.org/issues/40340445