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

[atjn]

Related proposal: #713

[atjn]

If you are testing this locally, be aware that there is a bug in Chrome devtools that will sometimes allow you to style the element such that it inherits the color, but if you try to set the same CSS rules in the document and reload it without having devtools open, the styles won't work.

[BenjaminAster]

This has nothing to do with the <hr> element per se, but mainly with the fact that Chromium doesn't support border-color: currentColor when border-style is set to groove/ridge/inset/outset, which is the case by default for <hr> even though you probably don't want to rely on this anyway. Simply add

hr {
	border: none;
	block-size: 1px;
	color: inherit;
	background-color: currentColor;
}

to your CSS and your <hr>s will work as expected and cross-browser.

[atjn]

@BenjaminAster thank you for finding that bug link for me, I was trying to find it but couldn't yesterday!

You are right that this issue is probably an underlying CSS issue rather than an issue specifically on the hr element. But the Interop team needs to know why this specific bug should be prioritized, and IMO it should be prioritized because it is blocking this common use case on the hr element.

...even though you probably don't want to rely on [the default] anyway. Simply add [custom css] to your CSS and your <hr>s will work as expected and cross-browser.

Of course I want to rely on the default :) If you wrote that custom CSS to be helpful, thank you for being helpful. If you wrote it to prove that there is no need to fix the default behavior, I completely disagree. The point of interop is to make the default reliable so people don't have to spend time applying workarounds. Your workaround also changes the general style of the element, which is not always desirable.

[wpt-interop]

Thank you for proposing Color inheritance on the hr element for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.