How to Style a Horizontal Line

A horizontal rule is generally 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 Color 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

<!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>

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 background-color for your thick horizontal line.

Example

<!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>

Add border:none to remove the border of your thick horizontal line.

Example

<!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 your horizontal line by setting the border-top property and defining the color. Follow the example to see an illustration of it.

Example

<!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

<!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 Background Image as Horizontal Rule

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

Example

<!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