Spacer
Divider <hr>
ECT approvedUpdated May 21, 2026
Description
- Use it to separate text or content elements. It should help enhance readability and organize the content.
- Use it to visually group related elements.
Anatomy
Anatomy
Types
Divider comes in 2 types, based on orientation:
- Horizontal
- Vertical
Select the appropriate type based on layout.
Variations
The pixel border is the same for both.
Typical
Prominent
Color mode
These examples show the typical and prominent variations.
Light
Dark
Dos and don'ts
Do
Technical example
Requirements
Dividers provide visual separators between sections of content.
Interactions
Divider elements are non-interactive. They do not receive keyboard focus, or have any mouse interactions.
Design considerations
If using the divider component to section content, use headings to start sections of new content.
Development considerations
The element is used to show thematic breaks between content, or changes within content in documents or ebooks. For this reason, the element should be avoided, as it's a semantic element within HTML.
- If using the element, the divider should have aria-hidden=”true” so that the element is not announced to screen reader users.
- It's recommended to use CSS borders, which are purely decorative and not announced to screen reader users.
- Do not use inline styles. Inline styles have been used in the snippet as an example of how to create CSS borders.
| Date | Changes |
|---|---|
| August 2025 | Updated categories to align with Carbon. |
| August 2025 | Updated guidance on the accessibility tab. |
| June 2025 | Updated direction prop term to "Rule type" |
| September 2024 | New version created. Previous version archived in the frozen Product design system. |