Divider

Design guidelines

Dividers are subtle lines that visually separate page content and help distinguish between sets of menu items.

Code

Horizontal

---

Toggle dark mode

HTML

<hr />

In practice

Use utility classes to effect visual permutations

Color

---

Toggle dark mode

<hr class="border-brand" />

Border

---

Toggle dark mode

<hr class="border-success border-5" />

Spacing

Sibling

---

Sibling

Toggle dark mode

<p>Sibling</p><hr class="my-10" /><p>Sibling</p>

Dividers are subtle lines that visually separate page content and help distinguish between sets of menu items.

Design guidelines

Horizontal

---

Toggle dark mode

In practice

• Use dividers to separate content into themes.
• They should not be used for decorative purposes.

Accessibility

For more information, see our accessibility guidelines.

ARIA: separator role on MDN Web Docs.