Register Login

How to Create Vertical Line in HTML

05 Dec 2019 2:08 pm || 0

You might have a couple of reasons to create a vertical line on your web page but HTML does not have any element for vertical lines. Although HTML only have the element for a horizontal line; but still there are multiple ways to create a vertical line in HTML as mentioned below:

  • Using Border CSS Property
  • Using width and height CSS Property
  • Using hr Transform Property

Here in this article, we have explained all possible ways to create Vertical line in HTML:

1) Using Border-Right, Height and Position CSS Property

<!-- It creates a vertical line using border-right, height and position property. -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vertical Line in html</title>
    <style>
        /* Applying the style on the complete body of html page */

        body {
            text-align: center;
        }
        /* CSS to add vertical line in the right */

        .verticalLine {
            height: 300px;
            border-right: 1px solid #000900;
            position: absolute;
            right: 50%;
        }
    </style>
</head>

<body>
    <h1>Vertical Line using HTML and CSS</h1>
    <div class="verticalLine">
        <!-- Dummy Text start -->
        <p>
           using border-right, height and position property
        </p>
        <!-- Dummy Text ends -->
    </div>
</body>

</html>

Run Code

OUTPUT

2) Vertical line using Border-Left, Height, and Position CSS Property

<!-- It creates a vertical line using border-left, height and position property. -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vertical Line in html</title>
    <style>
        /* Applying the style on complete body of html page */

        body {
            text-align: center;
        }
        /* CSS to add vertical line in the left */

        .verticalLine {
            height: 300px;
            border-left: 1px solid #000900;
            position: absolute;
            left: 50%;
        }
    </style>
</head>

<body>
    <h1>Vertical Line using HTML and CSS</h1>
    <div class="verticalLine">
        <!-- Dummy Text start -->
        <p>
           vertical line using border-left, height and position property
        </p>
        <!-- Dummy Text ends -->
    </div>
</body>

</html>

Run Code

OUTPUT

3) Vertical line using hr Transform Property

A vertical line can be created in HTML using transform property in <hr> tag. With the help of this property, you can rotate a horizontal line to a vertical line.

<!-- HTML code to demonstrate vertical lines from horizontal line using transform function -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vertical Line in html</title>
    <style>
        body {
            text-align: center;
        }

        hr {
            transform: rotate(90deg);
        }
    </style>
</head>

<body>
    <h1>Vertical Line using hr Transform Property</h1>
    <hr>
</body>

</html>

Run Code

OUTPUT

4) Double Vertical line using CSS Property

<!-- It creates a double vertical line using border-right, height and position property . -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vertical Line in html</title>
    <style>
        /* Applying the style on complete body of html page */

        body {
            text-align: center;
        }
        /* CSS to add vertical line in the right */

        .verticalLine {
            height: 300px;
            border-style: none double none none;
            position: absolute;
            right: 50%;
        }
    </style>
</head>

<body>
    <h1>Vertical Line using HTML and CSS</h1>
    <div class="verticalLine">
        <!-- Dummy Text start -->
        <p>
            double vertical line
        </p>
        <!-- Dummy Text ends -->
    </div>
</body>

</html>

Run Code

OUTPUT

5) Create Multiple Types (Double, Solid, Dashed, Dotted) Vertical Lines

<!-- Html code to demonstrate the multiple type of vertical lines -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vertical Line in html</title>
    <style>
        div.dotted {
            border-style: none dotted none none;
            margin: 10px;
            padding: 10px;
            right: 55.5%;
            position: absolute;
        }

        div.dashed {
            border-style: none dashed none none;
            margin: 10px;
            padding: 10px;
            right: 66%;
            position: absolute;
        }

        div.solid {
            border-style: none solid none none;
            margin: 10px;
            padding: 10px;
            right: 77%;
            position: absolute;
        }

        div.double {
            border-style: none double none none;
            margin: 10px;
            padding: 10px;
            right: 88%;
            position: absolute;
        }

    </style>
</head>

<body>
    <h1>Vertical Line using HTML and CSS</h1>
    <div class="dotted">dotted vartical line.</div>
    <div class="dashed">dashed vartical line.</div>
    <div class="solid">solid vartical line.</div>
    <div class="double">double vartical line.</div>
</body>

</html>

Run Code

OUTPUT

8) Create Vertical Lines using Paragraph, Section and Article Containers

<!-- HTML code to demonstrate vertical lines on different containers -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vertical Line in html</title>
    <style>
        body {
            text-align: center;
        }

        .paragraphWithVertcalLine {
            border-right: 1px solid #000;
            width: 300px;
            height: 300px;
        }

        .sectionWithVertcalLine {
            border-right: 1px solid #000;
            width: 300px;
            height: 300px;
        }

        .articleWithVertcalLine {
            border-right: 1px solid #000;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
   
    <p class="paragraphWithVertcalLine">
       vertical line with paragraph container
    </p>
    <section class="sectionWithVertcalLine">
        
        vertical line with paragraph section container
    </section>
    <article class="articleWithVertcalLine">
        
        vertical line with article container
    </article>
</body>

</html>

Run Code

OUTPUT