how to insert vertical line in html

It is easy enough to insert or draw a horizontal line in html. But how do you draw a vertical line in html. Unlike for the horizontal line, there is no single tag in html that will draw the vertical line. But that does not mean it is impossible to do so.

Using CSS

One way to do this is to use html tags with cascading style sheets or CSS.

We will use the div tag in html to draw a block in the page. On the div tag, you can use the border-left or the border-right property to draw the borders of the block. Combined with the height property of the div, you will end up drawing a vertical of the desired length.

<style>
.vertical {
    height: 300px;
    border-left: 2px solid black;
    position: absolute;
    left: 50%;
}
</style>
<div class="vertical"/>
  • height: the height can be used to specify the length of the line on the page.
  • border-left: this is the specify what kind of line you like. the example is a solid black line of 2 pixel thickness. You can have dashed lines or a much thicker line.
  • position and left: these two together specify where in the page you need the line aligned horizontally. Any of the attributes that will place the div appropriately can be used to position the line on the page

The output of the above code will display as a solid black vertical line in the middle of the page.

There are several different combinations that are possible. For example, you can use both the border-left and the border-right properties together to draw two vertical lines side by side. Be sure to specify the width of the div if you are drawing two lines. That will determine the distance between the two vertical lines.

Using the hr tag

The HTML tag for inserting horizontal line is the hr tag. You can use the same tag for inserting the vertical line as well, but you still will need to specify the width and size to format the line. So, all you probably doing is using the hr tag in lieu of the div tag in the earlier example.

Still, it can be quite simple to use if you don’t need any fancy formatting. You specify the width attribute to set the thickness of the line and the size attribute to specify the length or height of the line.

<hr width="1" size="300"/>

Using the div will give you a lot more flexibility in controlling the size and type of line that you want to draw as well as for drawing multiple lines. Well, you could draw the horizontal line just the same way, using the border-top or border-bottom properties instead of the left and right we had used.