Simple Styles For Horizontal Rules

Understanding the HR Element

The <hr> element represents a thematic break between paragraph-level elements, such as a change of scene in a story or a shift of topic within a section. Unlike purely decorative dividers, the hr element carries semantic meaning that screen readers interpret as a "separator" role.

Historically presented as a horizontal line in visual browsers, this element is now defined in semantic terms rather than presentational terms. This means if you want to draw a horizontal line, you should accomplish it through appropriate CSS rather than relying on default browser styling.

When to Use the HR Element

Use the <hr> element when you need to indicate:

• A change of topic within a section
• A shift of scene in narrative content
• A logical break between related but distinct content groups
• Visual separation of footer content from main article body

Avoid using <hr> for purely decorative purposes where a <div> with a CSS border would suffice, as the hr element carries semantic weight that should be reserved for meaningful content breaks.

For more on semantic HTML best practices, see our guide to clean HTML markup.

Basic Styling with the Border Property

The border property offers the most straightforward approach to styling horizontal rules. As a shorthand property, it allows you to set the style, width, and color of the rule in a single declaration.

Border Property Syntax

hr {
 border: border-width border-style border-color;
}

The three components work together:

• border-width: Specifies thickness using length values (2px, 0.5rem) or predefined values (thin, medium, thick)
• border-style: Defines the line style with options including solid, dashed, dotted, double, groove, ridge, inset, and outset
• border-color: Sets the color using named colors, hex values, RGB values, or the transparent keyword

Common Border Styles

Solid Line

hr.solid {
 border: 2px solid #333;
}

Dashed Line

hr.dashed {
 border: 3px dashed #ff6347;
}

Dotted Line

hr.dotted {
 border: 1px dotted #008000;
}

Each style serves different visual purposes--solid lines provide clear separation, dashed lines suggest continuation, and dotted lines work well for subtle dividers. These styling techniques align with CSS best practices for maintainable stylesheets.

Background and Height Approach

For more precise control over thickness and appearance, the combination of background-color and height properties offers excellent flexibility. This method creates solid-colored horizontal rules without relying on border mechanics.

Basic Background Approach

hr.custom {
 background-color: #333;
 height: 5px;
 border: none;
}

The key is setting border: none to remove the default border that browsers apply to hr elements. Without this, you'll see both the default border and your background color.

Advantages of This Approach

The background-color method provides advantages when you need:

• Thick, prominent dividers that border-style cannot achieve
• Consistent color application across different rule thicknesses
• Smooth color transitions with gradient backgrounds
• Fine-grained control over rule height without border-width limitations

hr.thick-divider {
 height: 10px;
 background-color: #2c3e50;
 border: none;
}

hr.gradient-rule {
 height: 4px;
 border: none;
 background: linear-gradient(to right, #667eea, #764ba2);
}

This approach pairs well with CSS custom properties for consistent theming across your project.

Creative Decorative Styles

Beyond basic styling, CSS enables creative decorative treatments that transform the humble horizontal rule into a design element.

Gradient Effects

Gradient backgrounds create visually striking dividers that add polish to modern designs:

hr.gradient-fade {
 border: 0;
 height: 1px;
 background: linear-gradient(to right, #ccc, #333, #ccc);
}

This gradient fades from light to dark and back, creating a sophisticated effect perfect for section transitions.

Shadow Effects

Drop shadows add depth and dimension to horizontal rules:

hr.shadow-below {
 height: 12px;
 border: 0;
 box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

The inset shadow creates the illusion of depth, making the rule appear to cast a shadow downward.

Inset and Embossed Effects

For designs that require subtle dimensionality:

hr.inset-effect {
 border: 0;
 height: 0;
 border-top: 1px solid rgba(0, 0, 0, 0.1);
 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

This technique combines light and dark borders to create an embossed appearance.

These decorative techniques complement CSS transition effects for polished, professional interfaces.

Pseudo-Element Decoration

CSS pseudo-elements allow you to add centered icons, symbols, or decorative elements to your horizontal rules. This technique transforms simple dividers into branded design elements.

Centered Symbol

hr.centered-symbol {
 overflow: visible;
 padding: 0;
 border: none;
 border-top: medium double #333;
 color: #333;
 text-align: center;
}

hr.centered-symbol:after {
 content: "§";
 display: inline-block;
 position: relative;
 top: -0.7em;
 font-size: 1.5em;
 padding: 0 0.25em;
 background: white;
}

The pseudo-element places a section symbol centered over a double-line hr, with the background color ensuring the symbol appears to break through the lines cleanly.

Custom Icon Decoration

hr.icon-decoration {
 border: 0;
 height: 1px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.icon-decoration:before {
 content: "◆";
 display: block;
 text-align: center;
 margin-top: -10px;
 color: #666;
}

This technique works well with styled components in React applications for consistent branded dividers.

Accessibility Considerations

The <hr> element has an implicit ARIA role of "separator". When styling, ensure:

1. Sufficient color contrast: WCAG AA requires 4.5:1 for text, 3:1 for large text elements
2. Visual indication: Avoid removing all visual indication while preserving the semantic meaning
3. Motion preferences: Respect reduced motion preferences for animated rules

@media (prefers-reduced-motion: reduce) {
 hr.animated {
 animation: none;
 }
}

Proper accessibility implementation aligns with our keyboard focus style guidelines for inclusive web experiences.

Responsive Design Considerations

Horizontal rules should adapt gracefully to different viewport sizes. On smaller screens, you may want to reduce rule thickness or adjust pseudo-element positioning to maintain visual balance.

hr {
 border: none;
 height: 4px;
 background-color: #333;
}

@media (max-width: 768px) {
 hr {
 height: 2px;
 }
}

For more responsive design patterns, explore our CSS Grid vs Flexbox guide to understand layout techniques that work seamlessly across all devices.

Sources

1. MDN Web Docs - hr Element - Semantic definition, ARIA role, and technical specifications
2. CSS-Tricks - Simple Styles for HRs - 8 creative styling techniques with full CSS code
3. W3Schools - How to Style HR Element - Beginner-friendly examples for common styles
4. GeeksforGeeks - How to Style HR Element with CSS - Three main approaches with syntax explanations