Horizontal rule CSS - Custom style hr tag

Published: · Reading time: 4 min

By default, the hr tag is just a thin straight line. It doesn’t possess any special properties, but you can make it look more appealing with some custom CSS code.

The hr HTML tag represents a break between paragraphs and looks like a straight line. It has a display: block property by default which means the element will span the full width of the container.

NOTE: The hr tag doesn’t have any specific HTML attributes attached to it. However, there were some that are currently deprecated.

That being said you’ll need to write custom CSS in order to change its appearance. The default styling for the hr tag is pretty much similar across different browsers and consist of CSS rules that style the border of the element.

hr {
  border-style: inset;
  border-width: 1px;
}
Horizontal rule on Chrome
Chrome
Horizontal rule on Edge
Edge
Horizontal rule on Firefox
Firefox
Horizontal rule on Safari
Safari

Styling Horizontal rule using border

One of the ways you can modify the appearance of the horizontal rule element is to change the border CSS rule, which includes the border-style, border-width, border-color and border-radius properties.

You can do that in just one line of CSS:

hr {
  border: 1px dashed cornflowerblue;
}

Result:


hr {
  border: 1px dotted cornflowerblue;
}

Result:


hr {
  border: 3px double cornflowerblue;
}

Result:


NOTE: When using border properly, you control hr thickness with the border-width property.

Styling Horizontal rule using background

However, for more custom effects you can apply shadows and gradients styles. Thus you’ll need to disable the border property.

hr {
  border: none;
  height: 1px;
  background-image: linear-gradient (to right, rgba(0, 0, 0, 0), cornflowerblue, rgba(0, 0, 0, 0));
}

Result:


hr {
  border: none;
  height: 0px;
  box-shadow: 0 1px 4px 1px cornflowerblue;
}

Result:


NOTE: When not using border property, you control hr thickness with height property.

Horizontal rule with symbols:

hr {
  border: 1px solid cornflowerblue;
  position: relative;
  display: flex;
  justify-content: center;
}

hr::before {
  content: 'A';
  position: absolute;
  height: 20px;
  width: 20px;
  font-size: 20px;
  background: white;
}

Result:


Like this article? Share it on:
Tags: