vertical line html

<style>
.vl {
  border-left: 6px solid green;
  height: 500px;
}
</style>

<div class="vl"></div>

To make a vertical line, use the border-left or border-right property. The height property is used to set the height of the border (vertical line) element. The position property is used to set the position of a vertical line. Example 1: It creates a vertical line using border-left, height, and position property.

Example:
.vl {
  border-left: 6px solid green;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
  • Microsoft Edge

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {
  border-left: thick solid #ff0000;
}
<div class="verticalLine">
  some other content
</div>