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:
Recommended Posts:
- How to make horizontal line with words in the middle using CSS?
- How to create table with 100% width, with vertical scroll inside table body in HTML ?
- How to break line without using <br> tag in HTML / CSS ?
- How to make a call-able link using HTML ?
- How to make PDF file downloadable in HTML link using PHP ?
- CSS | vertical-align Property
- Vertical alignment in Bootstrap with Examples
- CSS | Layout - Horizontal & Vertical Align
- Difference between Horizontal and Vertical micro-programmed Control Unit
- CSS | ::first-line Selector
- p5.js | line() Function
- How to add a new line in the alert box ?
- CSS | line-height Property
- PHP | GmagickDraw line() Function
- PHP | ImagickDraw line() Function
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
