Styling the hr element with CSS

The default <hr> rarely matches a site’s design. That is fine: the element provides the meaning—a thematic break—while CSS controls how that break looks.

Here are three small options.

A fading gradient

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

A two-colour dashed line

hr {
  border: 0;
  border-bottom: 1px dashed #ccc;
  background: #999;
}

A divider with a glyph

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

hr::after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -0.8em;
  padding: 0 0.3em;
  background: white;
  font-size: 1.6em;
}

The last version relies on its background matching the page, so remember to update that colour in dark mode. For most sites I would use the first or second option; a section sign is rather specific, but it can suit editorial layouts.

← Back to all articles