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.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more