Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to make a vertical line using HTML ?

  • Last Updated : 30 Jul, 2021

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. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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: 
 



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

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: 
 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!