How to Draw Vertical Line in HTML?
FREE
Overview
While building a web page or separating column-style content, you will run across HTML vertical lines.
In this article, we will learn how to quickly design the vertical line in the HTML web page using the external CSS and the <hr> tag transform property with the help of examples.
Pre-requisites
Should have familiarity with HTML <hr> tag. Also, familiar with the height, width, and border properties of CSS.
What are we Creating?
In this article, we are going to create a vertical line in HTML using the CSS Border property, <hr> transform-property and making use of the height and width CSS properties.
How to Draw a Vertical Line in HTML?
You may have several reasons for including a vertical line on your web page. However, HTML does not provide a vertical line element. It only has one element for a horizontal line, i.e.,<hr>. There are several ways to construct a vertical line in HTML, as mentioned below-
- Using the CSS Border Property.
- Making use of width and height CSS Property.
- Using the <hr> Transform Property.
Example: 1- In this example, we will create a vertical line using the border-left, height, and position properties.
Output
Example: 2- In this example, we will create a vertical line using the border-left and height properties.
Output
Example: 3- In this example, we will center the vertical line in our HTML page.
Output
Example: 4- In this example, we will center the vertical line in our HTML page using the <hr> tag.
Output
Conclusion
- The <hr> tag in HTML is used to produce a horizontal line. However, there is no tag for creating a vertical line. The border-left CSS attribute can be used to simulate a vertical line.
- The border-left property of CSS is used to style the left-side border. The property refers to border-left width, border-left style, and border-left color.