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: