how to insert vertical line in html and css

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 the 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 line 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.

You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw a horizontal line can be used to draw the vertical line as well.

Using a container tag such as div will also give you the ability to draw a vertical line beside a block of text, if that is what you need. Using a container tag gives you the flexibility to draw not only vertical lines, but horizontal lines as well around the text. To do so you can do something like this:

<div style="border-left: 2px solid black; border-right: 2px dashed green; width: 70em;">
    <div style="padding-left: 2em;">
        <p>The output of the above code will display as a solid black vertical line in the middle of the page.</p>
        <p>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.</p>
        <p>You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw
            a horizontal line can be used to draw the vertical line as well.</p>
    </div>
</div>
html-vertical-line.jpg

I have used the inline style attribute in the examples here, but ideally you would use an external style sheet and you can re-use these with the class attribute. That will give you the ability to have consistent look and feel across all your webpages.

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.