How to Change the Color of an <hr> Element

The HTML <hr> element is a block-level element and represents a horizontal rule. It creates a horizontal line. We can style the horizontal line by adding color to it. This will make your user-interface more attractive. It is possible to do by adding the background-color property. Also, we can specify the color of the horizontal line through the border-top property.

In this snippet, you can find some examples of adding color to the <hr> tag.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

Use two <p> elements and add an <hr> element between them.

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<hr>
<p>
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

Add CSS

Specify the height and background-color properties.
Set the border to “none”.

hr {
  height: 2px;
  background-color: #ff0000;
  border: none;
}

Let’s see the final code.

Example of adding color to the <hr> tag with the background-color property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        height: 2px;
        background-color: #ff0000;
        border: none;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
    <hr>
    <p>
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Let’s see another example.

Example of adding color to the <hr> tag with the border-top property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 3px solid #2c03fc;
        margin: 1em 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem Ipsum
    </p>
    <hr>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>