CSS HTML

How to make a vertical line with CSS

February 25, 2022

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.

vertical line with CSS cover

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 🙂

Conclusion

In this article we learned  how to create a vertical line and also horizontal lines with pure CSS

We just need to determine a width or height, in a div

And then use the border rule to manipulate the thickness and color of our line

Want to learn more about HTML & CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x