HTML Introduction

How to Make a Vertical Line in HTML

Last Updated : 11 Jul, 2025

The vertical line in HTML can be created using border-left or border-right, often combined with the height and position properties. Nearly 85% of HTML layouts use vertical lines for visual separation, especially in navigation menus and content sections. Below is a preview of a vertical line, followed by various methods to create one.

vertical line in html

Different Approaches to Make a Vertical Line in HTML

You can create a vertical line using CSS. Look at the examples below to learn how to create straight lines in HTML.

1. Using CSS border-left and height:

Example 1: In this example, we are using CSS border-left and height properties to make a straight line in HTML.

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML border Property
    </title> 
    <!-- border-left property is used to
        create vertical line -->
    <style>
        .vertical {
            border-left: 5px solid black;
            height: 200px;
        }
    </style>
</head>
<body> 
    <h1 style= "color: green;"> 
        GeeksForGeeks 
    </h1> 
    <div class= "vertical"></div>
</body> 
</html>

Output:

straight line in html

Note: If you want to learn Complete CSS then check out CSS Complete Guide.

2. Using the CSS rotate function:

Example 2: In this example, we have created a vertical line using the CSS rotate function in HTML.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        .vertical-line {
            width: 2px;
            /* Adjust the width as needed */
          
            height: 100px;
            /* Adjust the height as needed */
          
            background-color: #000;
            /* Change color if desired */
          
            margin: 0 auto;
            /* Center the line horizontally */
          
            transform: rotate(180deg);
            /* Rotate the line to make it vertical */
        }
    </style>
    <title>Vertical Line Example</title>
</head>
<body>
    <h1 style="text-align: center; color: green;">
      GeeksforGeeks
      </h1>
    <div class="vertical-line"></div>
</body>
</html>

Output:

straight line in html using css rotate function — Vertical line Using the CSS rotate function

Now that, we have made the vertical line and let's try to center the vertical line by following the below code example.

Example 3 : In this example, we will shows how to center the vertical line in HTML.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML border Property
    </title>
    <!-- style to create vertical line -->
    <style>
        .vertical {
            border-left: 6px solid black;
            height: 200px;
            position: absolute;
            left: 50%;
        }
    </style>
</head>
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <div class="vertical"></div>
</body>
</html>

Output:

vertical line center in html — Make the vertical line center in html

How to Make a Vertical Line in HTML

HTML Introduction

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript