Styling the hr Element With CSS

Styling the hr element starts with removing the browser’s default border, then choosing the line you want. Keep the element when it marks a thematic break; use an ordinary CSS border when the line is only decoration around a component.

A simple divider needs very little:

hr {
  border: 0;
  border-block-start: 1px solid currentColor;
  margin-block: 2rem;
}

The line follows the element’s text colour. Its spacing is independent of its thickness, which makes the rule easier to adjust than a mixture of height and several borders.

Styling the hr element without fighting its defaults

The HTML hr reference describes a thematic break, such as a change of scene or subject. CSS controls its appearance without changing that role.

A short document might use it like this:

<p>The first part of the story ends here.</p>
<hr>
<p>A different scene begins here.</p>

Avoid adding <hr> between every card simply because the design needs a line. A border on the card can express that visual separation without adding another thematic break to the document.

Reset the default border before styling one side. Otherwise a background, height, and browser-supplied border can combine into a line thicker than expected.

Set the colour and width independently

Use a class when only some dividers need a different treatment:

.section-rule {
  border: 0;
  border-block-start: 2px solid var(--divider-color, #777777);
  inline-size: min(100%, 30rem);
  margin: 2rem auto;
}

Add class="section-rule" to the element. The rule caps the divider at 30rem while allowing it to fit a narrower container.

The logical border property follows the block axis. For a normal horizontal writing mode, it gives the familiar horizontal line.

Use the surrounding layout’s spacing scale rather than letting each divider introduce an unrelated distance. The line can be decorative; its margins still participate in the page’s rhythm.

Keep the fading gradient as a separate variant

A gradient divider uses a background instead of a border:

hr.gradient-rule {
  border: 0;
  block-size: 1px;
  background: linear-gradient(to right, transparent, currentColor, transparent);
  margin-block: 2rem;
}

The linear-gradient reference covers the colour stops. Here the middle is visible while both ends fade out.

Do not combine the gradient’s one-pixel height with an extra visible border unless you want both. Keep the variants on separate classes so their rules are easy to compare.

A dashed alternative can use the border again:

hr.dashed-rule {
  border: 0;
  border-block-start: 1px dashed currentColor;
  margin-block: 2rem;
}

I would start with a solid or dashed rule for an ordinary blog. A gradient earns its place when it fits the surrounding typography rather than drawing attention to every section break.

Put an ornamental glyph beside the semantic element

For a section sign or similar ornament, keep the symbol separate from <hr>:

<div class="ornamental-break">
  <hr>
  <span aria-hidden="true">§</span>
</div>

.ornamental-break {
  position: relative;
  margin-block: 2rem;
  text-align: center;
}

.ornamental-break hr {
  margin: 0;
  border: 0;
  border-block-start: 3px double currentColor;
}

.ornamental-break span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  padding-inline: 0.4em;
  background: var(--page-background, #ffffff);
  font-size: 1.5em;
}

The glyph is decorative, so aria-hidden leaves it out of the accessibility tree. The <hr> retains the document’s thematic break.

The background behind the symbol must match the actual surface. If the divider sits inside a card, use the card’s colour rather than the page colour.

Let dark mode change the palette

For the ornamental example, define the background and inherited text colour together:

:root {
  --page-background: #ffffff;
  --page-text: #222222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: #121212;
    --page-text: #e8e8e8;
  }
}

body {
  background: var(--page-background);
  color: var(--page-text);
}

The plain and gradient rules already follow currentColor. The ornament also needs its background to follow the palette.

The CSS custom properties theme article develops that palette approach. For the divider itself, choose one treatment and check it on the surface where it will appear.

← Back to all articles