Divider

A visual separator between content blocks. CSS-only, no runtime.

When to use

Use a divider to visually separate sections of content where the separation is meaningful but doesn't need to be a full structural break (a heading or section element).

If you need a divider with embedded text ("or sign in with"), use Form-divider from elements/form/ instead.

Variants

Variant	Class	Use for
Default	`.divider`	Standard separation, hairline weight
Strong	`.divider.-strong`	More prominent separation
Muted	`.divider.-muted`	Subtle separation
Emphasis	`.divider.-emphasis`	Thicker rule for stronger visual division
Vertical	`.divider.-vertical`	Inline separator in flex/grid rows

Modifiers compose: .divider.-vertical.-strong is allowed.

Anatomy

<hr class="divider" />
<hr class="divider -strong" />
<hr class="divider -muted" />
<hr class="divider -emphasis" />

<div style="display:flex; align-items:center; gap:1rem;">
  <span>Left</span>
  <hr class="divider -vertical" />
  <span>Right</span>
</div>

Tokens used

From semantic tier

--color-border-default — default background
--color-border-strong — strong variant
--color-border-muted — muted variant
--border-width-hairline — default thickness
--border-width-emphasis — emphasis variant thickness
--size-control-m — minimum vertical extent

Accessibility

<hr> has implicit role="separator". For vertical dividers, browsers treat the element as decorative if aria-orientation is not provided — this is acceptable for visual-only separation. If the orientation is semantically meaningful, the author should add aria-orientation="vertical".

The default rendering does not appear in document outline (the rule is purely visual). Screen readers may announce the separator depending on the user's preferences.

Edge cases

Inside flex/grid containers: vertical divider stretches to the cross-axis size via align-self: stretch and a min-block-size fallback. If the container has no defined cross-axis size, the divider falls back to --size-control-m.
No margin built in: authors control surrounding spacing via the parent container's gap or margin. The divider itself has zero margin so it composes predictably.

Do

Use <hr> as the tag. It is semantically correct and screen reader friendly.
Pair vertical dividers with a display: flex or display: grid parent so they get a cross-axis size.

Don't

Don't use a divider as decoration inside a paragraph. Use semantic text dividers (—, ·) for inline cases.
Don't add custom thickness via inline styles. Pick the closest modifier (-emphasis) or add a component-specific tier-3 token.