PUBLISHED ON: JULY 17, 2021
How to create a vertical line in HTML?
The vertical lines can be used for some specific purpose in HTML. HTML does not have any element to create vertical lines. But we can add a vertical line to the webpage using multiple ways in HTML.
Using border CSS Property
The CSS property can be used to create a vertical line in HTML. Use border-left or border-right property to add a vertical line to the webpage. The height of the vertical line can be set using height property and the vertical line can be positioned using position property.
Example: Create a vertical line using CSS border property
Here, we have used CSS height and position property along with border property to create a vertical line. The border-left property creates a vertical line to the left.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.vertical {
border-left: 6px solid blue;
height: 100px;
position:absolute;
}
</style>
</head>
<body>
<h2>The vertical line</h2>
<div class="vertical"></div>
</body>
</html>
Output
Here is the output of the above code.
Using hr transform property
The <hr> tag is used to create a horizontal line on the webpage. The transform property can be used to rotate these horizontal lines to vertical lines.
Example: Create a vertical line using the hr transform property
Here, we have used transform: rotate(90deg) to rotate the horizontal line to the vertical line.
Conclusion
Though the HTML does not have any element to create a vertical line, we can create it using either CSS border property or the transform property to rotate horizontal lines.
