Last updated
Visual Dividers in Web Design
Dividers (horizontal rules, section separators) create visual breathing room between content sections.
While the HTML <hr> element is the semantic choice for thematic breaks,
CSS gives you far more control over appearance — from simple lines to gradient fades,
decorative patterns, and animated separators.
CSS Divider Techniques
/* Simple solid line */
.divider { border: none; border-top: 1px solid #e2e8f0; margin: 2rem 0; }
/* Gradient fade */
.divider-gradient {
border: none; height: 1px; margin: 2rem 0;
background: linear-gradient(to right, transparent, #667eea, transparent);
}
/* Dotted */
.divider-dotted { border: none; border-top: 2px dotted #cbd5e0; margin: 2rem 0; }
/* With centered text */
.divider-text {
display: flex; align-items: center; gap: 1rem; margin: 2rem 0;
color: #718096; font-size: 0.875rem;
}
.divider-text::before,
.divider-text::after {
content: ''; flex: 1; border-top: 1px solid #e2e8f0;
}
/* Thick accent */
.divider-accent {
border: none; height: 4px; width: 60px; margin: 2rem auto;
background: #667eea; border-radius: 2px;
}Semantic Use of <hr>
The HTML <hr> element represents a thematic break between paragraph-level content —
for example, a scene change in a story, or a shift in topic in an article.
It has implicit ARIA role separator. For purely decorative dividers,
use a <div> with aria-hidden="true" instead,
so screen readers don't announce it as a content break.