How to Style a Horizontal Line

A horizontal rule is commonly used as content or section divider. As a horizontal rule the <hr> element is used. Originally the <hr> element was styled using attributes. Nowadays, in HTML5, the <hr> element tells the browser that there is a paragraph-level thematic break. Let’s see how to style the <hr> element with CSS below.

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

Change the size and position of a horizontal rule

The <hr> element is styled with CSS rules instead of attributes. Change the width of the horizontal line by setting the width property and then center it using the margin property.

Example of changing the width and position of a horizontal rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h1>Center Horizontal Line</h1>
    <hr />
  </body>
</html>

Result

Center Horizontal Line

If you want to change the thickness, or height of your horizontal line, add the height property to your <hr> style. In this case, you can also set the background-color property for the thick horizontal line.

Example of changing the height and background color of the horizontal rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        width: 100%;
        height: 30px;
        margin-left: auto;
        margin-right: auto;
        background-color: #b7d0e2;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal Line with Height and Background Color</h1>
    <hr />
  </body>
</html>

Set the border property to "none" to remove the border of your thick horizontal line.

Example of adding a horizontal rule without a border:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        width: 100%;
        height: 30px;
        margin-left: auto;
        margin-right: auto;
        background-color: #b7d0e2;
        border: 0 none;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal Line with Height and Background Color</h1>
    <hr />
  </body>
</html>

You can change the color of the horizontal line by setting the border-top property and defining the color. Follow the example to see an illustration of it.

Example of adding a horizontal line with the border-top property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        border-top: 5px solid #095484;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal Line with Height and Background Color</h1>
    <hr />
  </body>
</html>

Additional style for horizontal lines

Go further with horizontal lines by giving different styles to your <hr> element’s border. Check the example code to see what stunning horizontal lines are presented.

Example of adding different styles to horizontal lines:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .hr1 {
        border: 0;
        height: 3px;
        background: #095484;
        background-image: linear-gradient(to right, #ccc, #095484, #ccc);
      }
      .hr2 {
        border: 0;
        height: 3px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(9, 84, 132), rgba(0, 0, 0, 0));
      }
      .hr3 {
        height: 15px;
        border: 0;
        box-shadow: inset 0 12px 12px -12px rgba(9, 84, 132);
      }
      .hr4 {
        border-top: 3px double #095484;
      }
      .hr5 {
        background-color: #fff;
        border-top: 2px dashed #095484;
      }
      .hr6 {
        border-top: 3px dotted #095484;
      }
      .hr7 {
        height: 30px;
        border-style: solid;
        border-color: #095484;
        border-width: 1px 0 0 0;
        border-radius: 20px;
      }
      .hr8 {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: #095484;
        border-width: 0 0 1px 0;
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <h3>Gradient Horizontal Line</h3>
    <hr class="hr1" />
    <h3>Gradient Transparent</h3>
    <hr class="hr2" />
    <h3>Single-direction Drop Shadow</h3>
    <hr class="hr3" />
    <h3>Double</h3>
    <hr class="hr4" />
    <h3>Dashed</h3>
    <hr class="hr5" />
    <h3>Dotted</h3>
    <hr class="hr6" />
    <h3>Rounded Corners</h3>
    <hr class="hr7" />
    <hr class="hr8" />
  </body>
</html>

Use a background image as a horizontal rule

If you want to set an ornament or image as a horizontal rule for your website, you can add a background image to your horizontal rule with the help of the CSS background property. Also, set the height equal to the height of your image (or how much part you want from the image), and border: none, so as your image will look like as a horizontal line.

Example of adding a background image as a horizontal line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .hr1 {
        height: 25px;
        background: url(/uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg) no-repeat center;
        border: none;
      }
      .hr2 {
        height: 25px;
        background: url(/uploads/media/default/0001/01/295e26d0bdf4d635c8887a6b0f37b61d7c69c5fc.png) no-repeat center;
        border: none;
      }
      .hr3 {
        height: 25px;
        background: url(/uploads/media/default/0001/01/09a69b0ad1525926a508356955843cf84306fd85.png) no-repeat center;
        border: none;
      }
      .hr4 {
        height: 20px;
        background: url(/uploads/media/default/0001/01/12fbe0b5b3d06c7e379d646068faa12f70452638.png) no-repeat center;
        border: none;
      }
      .hr5 {
        height: 50px;
        background: url(/uploads/media/default/0001/01/7d5f2a204567da4df1c1d7e5017d7b510ef56619.jpeg) no-repeat center;
        border: none;
      }
      .hr6 {
        height: 70px;
        background: url(/uploads/media/default/0001/01/fb69fe21cc880d96b3267efaa88cd72288a77fef.png) no-repeat center;
        border: none;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal Lines with Images</h1>
    <hr class="hr1" />
    <br />
    <hr class="hr2" />
    <br />
    <hr class="hr3" />
    <br />
    <hr class="hr4" />
    <br />
    <hr class="hr5" />
    <hr class="hr6" />
  </body>
</html>

How to add attributes to a horizontal line across the page?

You can add attributes to a horizontal line in HTML by using the <hr> tag and adding the desired attribute(s) as HTML attributes within the opening tag. Here is an example:

<hr style="border: 1px solid black;" id="my-hr" class="my-class" aria-label="Horizontal line across the page">

In this example, we have added three attributes to the <hr> element:

  1. style: This attribute sets the inline style of the element. In this case, we have set the border property to create a solid black line. You can use any CSS property here to style the line as desired.

  2. id: This attribute sets the unique identifier for the element. This can be used to target the element with JavaScript or CSS.

  3. class: This attribute sets the CSS class(es) for the element. This can be used to apply common styles to multiple elements with the same class.

  4. aria-label: This attribute is used to provide an accessible label for the element. It is read out loud by screen readers and is helpful for users who are visually impaired.

You can add any valid HTML attribute to the <hr> tag in this way.