The default browser style for <hr> is so weird. It’s basically:
border-style: inset;
border-width: 1px;The default border-color is black, but the border doesn’t actually look black, because the inset border “adds a split tone to the line that makes the element appear slightly depressed.”
If I kick up the border-width to 40px you can see it more clearly:
I often reset an <hr> to be “just a line” and it always gets me because I’ll try something, like height: 1px with a background at first, but that’s not right. The easier way to clear it is to turn off all the borders then only use border-top or border-bottom. Or, turn off all the borders, set a height, and use a background.
Annnyway… Sara has some of the nicest horizontal rules in town on the current design of her site, and she’s written it all up. Guess what? They aren’t even <hr> elements! It turns out the only styling hook you have is CSS, which wasn’t as adaptive as Sara needed, so she ended up with a <div role="separator"> (TIL!) and inline SVG.
The best way to get the full flexibility of an SVG is by inlining it. But the
<hr>element is content-less — it has no opening and closing tags within which you can place other elements.The only way to work around the limitations of
<hr>while preserving semantics for screen reader users is to use adivand provide the semantics of anhrusing ARIA.
