April 16th, 2021
The default browser style for
<hr> is so weird. It’s basically:
border-style: inset; border-width: 1px;
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
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-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 a
divand provide the semantics of an
The class=”aligncenter” post Not Your Typical Horizontal Rules.