To create a vertical line in CSS, we can either use the border-left or the border-right property. This is because from a CSS point of view a vertical line is nothing but a left/right border with some height.
In the below example, we have created a vertical line of 100px height by simply specifying a border-left to the div element.
The width and color of the vertical line can easily be specified by the border-width and border-color properties or alternatively you can specify them in the border shorthad property.
Here is the working example:
Example:
div{
border-left: 5px solid blue;
height: 100px;
}
If you want to place the vertical line on the right side, you can create it using the border-right property.
Here is a fully working example:
Example:
div{
border-right: 5px solid blue;
height: 100px;
}
Centering the vertical line
In the last two examples, we created two vertical lines, one we placed on the left side and the other we placed on the right side. But now the next question that comes in our mind is that how can we create a vertical line that can be positioned in the center of the page or an element?
Well it’s also easy and we can achieve this using the position property.
All you need to do is place the vertical line inside a div element and set its(the div) position to relative. Now apply position: absolute; on this vertical line and control its position using the left, right, bottom, or top properties.
Here is a working example that places the vertical line in the center of its container:
Example:
div.vl-container{
position: relative;
}
div.vl{
border-left: 5px solid blue;
height: 100px;
position: absolute;
left: 50%;
}
