By default the horizontal line created by <hr> is just a thin grey line, but it can easily be styled using CSS.

Default <hr>

The line above is the default line created by adding an unstyled <hr> tag to the HTML document. Since what we see on the screen as a "line" is really just 1px thick border, we are able to apply simple styles it by adjusting it's border properties. For example hr { border: 2px dashed #222 } would create the dashed black line below.

More advanced styling options, like gradients and other background images, become available if we hide the <hr> tag's border and begin to style it's background-image property instead.

Styling Examples

Here are some examples of styled <hr> tags below is the css that creates them.

CSS

.yellow-fade {
  border: 0;
  height: 3px;
  background-image: linear-gradient(to right, #f9c307, rgba(0, 0, 0, 0));
}
.rainbow {
  height: 3px;
  border-width: 0;
  background-image: linear-gradient(
    to left,
    red,
    orange,
    yellow,
    green,
    blue,
    violet
  );
}
.pink-fade {
  border: 0;
  height: 3px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    salmon,
    rgba(0, 0, 0, 0)
  );
}
.blue-yellow-striped {
  border: 0;
  height: 5px;
  background-size: 150px 150px;
  width: 100%;
  background-image: linear-gradient(
    45deg,
    #006ba8 0%,
    #006ba8 25%,
    #fecd01 25%,
    #fecd01 50%,
    #006ba8 50%,
    #006ba8 75%,
    #fecd01 75%
  );
}

Styling Horizontal Lines

Default <hr>

Styling Examples