Home »
CSS
How to make a vertical line in HTML using CSS?
In this article, we'll see how we can make a vertical line in HTML using CSS?
Submitted by Apurva Mathur, on June 19, 2022
n HTML we don't have any specific tag which can help us to make a vertical line as we have <hr> tag to make horizontal line. To make vertical line in HTML we'll use border-right, border-left, margin-right and margin-left properties. The properties will set the line in the required format.
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to make a vertical line in HTML</title>
<style>
.verticalLineleft {
border-left: 6px solid red;
height: 100px;
margin-left: 60px;
}
.verticalLineright {
border-right: 6px solid red;
height: 100px;
margin-right: 60px;
}
.verticalLinecenter{
border-right: 6px solid red;
height: 100px;
margin-right: 50%;
}
</style>
</head>
<body>
<div style="background-color: #b3d4fc">
<center>
<h2>Vertical line</h2>
</center>
<div class="verticalLineleft"></div>
<div class="verticalLineright"></div>
<div class="verticalLinecenter"></div>
</div>
</body>
</html>
Output:
Explanation:
Left vertical line:
Step 1: Take an empty div and give it a class (Here I've used a class selector to give styling you can use any selector)
Step 2: Use this class to apply CSS under the style tag. I've applied internal CSS, you can directly use inline CSS also.
Step 3: Border-left property will set the line in left most corners; it has three parameters: (width, border-type, color). Height property is given to manage its height and last but not the least margin-left property is optional I've used it here so that it can come closer to the center.
A similar concept is applied when we want the vertical line on the right side or in the center. The only difference is when you want a vertical line in the center, it's important to give margin-left or margin-right property (any one of them) and set its value to 50 % so that it will appear in the center.
CSS Tutorial & Examples »