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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output:
