Seven dividers: a label with a line filling the rest of the row, a line that fades at both ends, a book-style ornament break, dotted, dashed and wavy patterns, a divider with an icon badge, vertical separators between inline items and the three-asterisk section break.
A section divider with a small label at the start and a line filling the rest of the row, made with flexbox and a pseudo-element that grows. The label is a real heading, so the divider also structures the page.
An hr styled as a line that fades out at both ends, softer than a hard rule. The hr keeps its meaning as a thematic break for screen readers, and the gradient is its background with the default border removed.
A classic book-style break: two short lines with a small dot ornament between them. The lines are the hr's ::before and ::after and the dot is its background, so the markup stays a single semantic element.
View code
<div class="dv3"><p>The chapter closes with a quiet scene.</p><hr><p>A new chapter begins.</p></div>
Three divider patterns made with repeating gradients instead of border styles, so the dot size and spacing are under your control: round dots, long dashes and a wavy line. Each is an hr with its border removed.
A divider with a round icon badge in the middle, used between steps or sections of a form. The icon is decorative, and if the divider needs a meaning, such as Optional details below, it goes in visible text beside it.
Thin vertical lines between inline items such as meta information, drawn as borders on every item except the first with the lobotomised-owl style + selector. They wrap cleanly because each item carries its own separator.
View code
<ul class="dv6"><li>5 min read</li><li>Design</li><li><time datetime="2026-10-02">2 Oct 2026</time></li><li>By Ana</li></ul>
The typographer's section break, three spaced asterisks, set as generated content on an hr. Writers use it between scenes; the hr keeps the thematic break meaning while the asterisks are purely visual.
View code
<div class="dv7"><p>…and the door closed behind her.</p><hr><p>Three weeks later, the letter arrived.</p></div>
The <hr> element is a thematic break, announced as a separator. Use it between topics or scenes; use plain CSS borders or pseudo-elements for purely decorative lines.
Style the hr freely
Remove its default border with border: 0, then give it a height and a background, gradient or generated content. It keeps its meaning whatever it looks like.
Patterns from gradients
Repeating radial and linear gradients draw dots, dashes and waves with exact control over size and spacing, which border styles do not offer.
Separators that wrap
For inline lists such as metadata, put the separator on each item after the first with li + li, so the separators follow the items when they wrap.
Frequently asked questions
Should decorative dividers be hidden from screen readers?
Yes. Use a styled div or pseudo-element, or add aria-hidden, when a line is not a real break.
Can an hr be vertical?
It can be styled that way, but for separators between inline items, borders on the items are simpler.
How do I add text in the middle of a divider?
Use a heading or span with flexbox and two pseudo-element lines, as the label demo does.