deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

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.

vertical line using CSS

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.