DEV Community

mikestan
mikestan

Posted on

How to Style an HTML <hr>: A Clean, Copy-Paste CSS Pattern

#webdev #frontend #css #html

Most browsers render an HTML <hr> as a horizontal rule, but the default styling is not always what you want in a real interface.

A common first attempt is to change height or color and move on. That can leave the browser's default border in place, which is why a divider may look thicker, doubled, or different from the design you expected.

Here is a small, reusable pattern that makes the result predictable.

Start with a stable divider class

Add this HTML wherever a thematic break between sections makes sense:

<hr class="section-divider">
Enter fullscreen mode Exit fullscreen mode

Then add this CSS:

hr.section-divider {
  border: 0;
  border-top: 2px dashed #ca8a04;
  width: 60%;
  max-width: 42rem;
  margin: 2rem auto;
}
Enter fullscreen mode Exit fullscreen mode

This creates a centered, dashed divider that stays readable on both narrow and wide layouts.

Why this pattern works

There are four important choices in that snippet:

  1. border: 0 removes the browser's default border before you add your own style.
  2. border-top gives you one visible line to control.
  3. width and max-width keep the divider from becoming excessively long.
  4. margin: 2rem auto adds vertical breathing room and centers the element.

The hr element is also semantic. It represents a thematic break in content, such as a shift from one topic to another. That makes it a better choice than a random empty div when the line actually separates ideas.

Three useful variations

Once the base pattern is in place, changing the appearance is straightforward.

A quiet solid divider

Use this when the line should support the layout without attracting attention:

hr.section-divider {
  border: 0;
  border-top: 1px solid #cbd5e1;
  width: 100%;
  margin: 1.5rem 0;
}
Enter fullscreen mode Exit fullscreen mode

A dotted divider

A dotted rule works well for lightweight notes, forms, or playful interfaces:

hr.section-divider {
  border: 0;
  border-top: 2px dotted #94a3b8;
  width: 50%;
  margin: 2rem auto;
}
Enter fullscreen mode Exit fullscreen mode

A stronger double divider

For an editorial section break, use a double border with enough thickness for the two lines to remain visible:

hr.section-divider {
  border: 0;
  border-top: 4px double #475569;
  width: 70%;
  margin: 2.5rem auto;
}
Enter fullscreen mode Exit fullscreen mode

Two mistakes to avoid

Styling height without clearing the border

This is the source of many unexpected divider styles:

/* Avoid relying on this alone */
hr {
  height: 2px;
  background: #ca8a04;
}
Enter fullscreen mode Exit fullscreen mode

Some browser defaults can still contribute a border. Start by resetting the border, then choose either border-top or a deliberate background-based design.

Using old presentational attributes

Attributes such as size and noshade are old HTML patterns. CSS gives you clearer, reusable control over color, spacing, width, and style.

When not to use <hr>

Use <hr> when the line marks a real change of topic or section.

If the line is only decorative—for example, a visual flourish inside a card or a component border—a styled div or a pseudo-element may be a better fit. The markup should describe the meaning of the content, not only its appearance.

Try the styles before copying code

If you want to experiment with the color, width, thickness, alignment, and line style before editing your stylesheet, try the HTML Line Divider Generator.

References

Top comments (0)