How to make a vertical line with CSS

In this article we will learn how to make a vertical line in your HTML project, with CSS only, in a practical and fast way, which is similar to an hr element.

Hey you all programmers, all right? Let’s learn how to create a vertical line!

The idea of creating a vertical line is completely different from just putting an hr-like element

Which, for those who don’t know, displays a horizontal line, but I don’t particularly advise it because it ends up limiting you a lot

As we will see in this article, you can also create horizontal lines so that you can control all aspects of it with CSS

So let’s go to the example:

<div id="vertical-line"></div>
<div id="horizontal-line"></div>

Here we create a very basic HTML, with two divs that will represent our lines: the vertical and the horizontal

Now let’s go to the CSS to make these lines:

#vertical-line {
 height: 200px;
 border-right: 1px solid red;
}

#horizontal-line {
 width: 300px;
 border: 1px solid #000;
}

See what is returned in the browser:

Now let’s see in detail what happened in the code, we simply create a div and determine a height, if the line is vertical, or width, if the line is horizontal

This will serve to make our line the size we observe as necessary.

Finally, we determine a border which is the thickness of the line and we can also define its color

And then the line will be ready, both vertically and horizontally 🙂