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 adiv
and provide the semantics of anhr
using ARIA.
Direct Link to Article — Permalink
The post Not Your Typical Horizontal Rules appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.