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;
}

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: