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 this, but I have proposed one:
web-platform-tests/wpt#48254

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

[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.