How to Add a Vertical Line in HTML

Solutions with HTML and CSS

In this snippet, you can see how to add a vertical line in HTML. But you need to use CSS, as well. Add a vertical line on the left or right side by using the border-left or border-right properties, respectively. See also how to center a vertical line and how to add a vertical line before a text.

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

Example of adding a vertical line on the left side:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .verticalLine {
        border-left: 4px solid #4b42f5;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Example of a vertical ine</h2>
    <div class="verticalLine"></div>
  </body>
</html>

Result

Example of adding a vertical line on the right side:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .verticalLine {
        border-right: 4px solid #4b42f5;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Example of a vertical line</h2>
    <div class="verticalLine"></div>
  </body>
</html>

To center a vertical line, set the position property to “absolute”.

Example of centering a vertical line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .verticalLine {
        border-left: 4px solid #4b42f5;
        height: 200px;
        position: absolute;
        left: 50%;
        margin-left: -3px;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="verticalLine"></div>
  </body>
</html>

In our last example, we add a vertical line before a text.

Example of adding a vertical line before a text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .verticalLine {
        border-left: thick solid #4b42f5;
      }
    </style>
  </head>
  <body>
    <div class="verticalLine">
      Lorem Ipsum
    </div>
  </body>
</html>