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.

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>
Do you find this helpful?

Related articles