How to Divide a Horizontal Line into Multiple Parts

Solutions with CSS

To divide an HTML <hr> element into multiple parts, you can set a border on its top or bottom.

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

If you want your <hr> element to be divided into some parts with different widths, you need to try the following example.

Here, we use multiple <hr> elements, the display of which is set to "inline-block" and the border-top is specified as "solid". Then, we set the width of each horizontal line.

Example of dividing an <hr> into multiple parts with different widths:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .horizontal-line {
        display: inline-block;
        border-top: 3px solid #8b37b8;
      }
      .hr1 {
        width: 100px;
      }
      .hr2 {
        width: 50px;
        margin-left: 10px;
      }
      .hr3 {
        width: 30px;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <hr class='horizontal-line hr1' />
    <hr class='horizontal-line hr2' />
    <hr class='horizontal-line  hr3' />
    <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.
    </p>
  </body>
</html>

Try it Yourself »

Result

Lorem Ipsum

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.

In our example below, we use the border-top property on the <hr> element and use its "dashed" value.

Example of dividing an <hr> element into multiple parts:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        border-top: 5px dashed #36a82d;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <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.
    </p>
  </body>
</html>