Skip to content
Related Articles

Related Articles

How to make a vertical line using HTML ?
  • Last Updated : 19 Feb, 2019

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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :