Open In App

How to Make a Vertical Line in HTML

Improve
Improve
Like Article
Like
Save
Share
Report

To make a vertical line in HTML we can use the border-left or border-right property. The height property is used to set the height of the border (vertical line) element. The position property is used to set the position of the vertical line. Here is the preview image of the Vertical Line. Now, let’s discuss the different approaches to making the vertical line in HTML.

vertical line in html

Different Approaches to Make 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.

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

2. Using the CSS rotate function:

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

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: In this example, we will shows how to center the vertical line in HTML.

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:

Make the vertical line center in html



Last Updated : 18 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads