W3docs
en
Log in

How to Divide a Horizontal Line into Multiple Parts

In this tutorial, you will learn how it is possible to divide an HTML horizontal line into multiple parts. For that, you can use the CSS border-top property.

Tags

Solutions with CSS

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

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

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <span>Lorem Ipsum</span> <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> </div>

In the next example, we use the <span class="property">border-top</span> property on the <hr> element with a "dashed" value to create a segmented line.

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>
Try it Yourself »