Divider

Orientation Variants

Inset Variants

Content Variants

Thickness Variants

Generate and preview border styles with the Divider Generator.

Divider Properties

CSS Custom Properties

Design Token Mappings

Use the Spacing Scale Generator to visualise how different spacing tokens affect divider margins. Preview divider colors against backgrounds using the Contrast Checker.

Divider States

Dividers are non-interactive elements and therefore have a minimal state model:

Because dividers are not focusable or interactive, they do not have hover, active, focus, or disabled states. If a divider contains interactive content (e.g., a clickable "Show more" link), that interactive element carries its own state model independently.

Conditional Rendering

Dividers between list items should conditionally render — the last item in a list should not be followed by a divider. In React:

items.map((item, i) => (
  <Fragment key={item.id}>
    <ListItem {...item} />
    {i < items.length - 1 && <Divider />}
  </Fragment>
))

Accessibility Requirements

The HTML <hr> element carries an implicit role="separator" and is universally understood by assistive technologies. This makes the native <hr> the strongest semantic choice for horizontal dividers.

WCAG Success Criteria:

• 1.3.1 Info and Relationships (Level A): When a divider conveys structural meaning (separating distinct sections), it must be implemented with <hr> or role="separator" so screen readers announce the boundary. When purely decorative, use role="presentation" or aria-hidden="true" to suppress announcement.
• 1.4.1 Use of Color (Level A): Do not rely solely on a colored divider to convey meaning. If a red divider indicates an error boundary, provide an additional textual or iconic cue.
• 1.4.11 Non-text Contrast (Level AA): The divider line must have at least 3:1 contrast against its adjacent background if it conveys meaning. Purely decorative dividers are exempt. Verify with the Contrast Checker.
• 4.1.2 Name, Role, Value (Level A): When using a custom element (e.g., <div>) instead of <hr>, explicitly set role="separator". For vertical dividers with role="separator", set aria-orientation="vertical".

Screen Reader Behavior:

Semantic vs Decorative Decision:

If the divider separates content that a sighted user would perceive as distinct sections, keep it semantic. If it's purely aesthetic flourish (e.g., a decorative line in a hero section), mark it decorative. The test: if you removed the divider, would a sighted user lose understanding of content grouping? If yes, it's semantic.

Usage Guidelines

Do:

• Use <hr> as the base element whenever possible for built-in semantics
• Pair dividers with appropriate whitespace — the divider alone is not a spacing mechanism; use the Spacing Scale for margins
• Use inset dividers in lists where items share a leading element (avatar, icon) to maintain visual continuity of the leading column
• Apply role="presentation" to decorative dividers that do not communicate structure
• Use the lowest-contrast divider color that still reads clearly against the background — overly dark dividers in light themes create visual clutter

Don't:

• Use dividers as a substitute for proper spacing — if the content is clearly separated by whitespace and hierarchy, the divider is redundant
• Place dividers between every single element in a dense layout — this creates a "cage" effect that makes the UI feel rigid
• Use thick, high-contrast dividers between tightly related items — it over-separates content that should feel cohesive
• Forget to conditionally omit the last divider in a list — a trailing divider before empty space looks like an error
• Nest dividers inside interactive elements — <hr> inside a <button> or <a> is invalid HTML

Spacing Recommendations:

Design System Implementations

Material Design 3 (MUI) provides a <Divider> component with props for orientation (horizontal | vertical), variant (fullWidth | inset | middle), flexItem (boolean for use in flex containers), textAlign (left | center | right when children are provided), and light (reduces opacity). MUI renders <hr> by default and supports child content (text/chips) centered on the line. The component automatically handles aria-orientation for vertical dividers. MUI's divider color is tied to the divider palette channel (rgba(0,0,0,0.12) in light mode).

Ant Design provides a <Divider> component with type (horizontal | vertical), orientation (left | center | right for text placement), orientationMargin (distance from edges when text is left/right-aligned), dashed (boolean for dashed line style), plain (boolean for plain text vs styled heading), and children (inline text). Ant renders <div role="separator"> rather than <hr>. Its vertical divider is implemented as an inline-block element with fixed height.

Chakra UI offers <Divider> with orientation (horizontal | vertical), variant (solid | dashed), and standard style props (borderColor, borderWidth). Chakra renders <hr> for horizontal and <div> for vertical. It does not natively support child content on the line — you would compose that with <Flex> and pseudo-elements or use the <AbsoluteCenter> utility.

Radix UI does not provide a dedicated Divider primitive. Their recommendation is to use a styled <hr> or <div role="separator"> since the component is simple enough not to need a headless abstraction. This is a reasonable stance — dividers have no complex interaction or state management needs.

Headless UI does not include a divider component for the same reasons as Radix.

Spectrum (Adobe) provides <Divider> with size (S | M | L), orientation (horizontal | vertical), and staticColor (for placement over colored backgrounds). Spectrum uses three thickness tiers: small (1px for list separators), medium (2px for section breaks), and large (4px for header underlines). Their implementation uses <hr> with role="separator" and handles aria-orientation automatically.