How to make a vertical line using HTML ?

To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line.

Example 1: It creates a vertical line using border-left, height and position property.

<!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:

Example 2: It creates a vertical line using border-left and height property.

<!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:

My Personal Notes

Recommended Posts: