Coming up with a beautiful webpage design can be tricky as there are so many elements you need to put together. That includes images, headlines, texts, videos, and vertical lines.
Unfortunately, there is no HTML tag you can use to add a vertical line to your website. The only closely related tag is the <hr /> tag which you can use to draw a horizontal line across the webpage.
Are you looking for a way to add a vertical line to your website using HTML? Then, continue reading this post and learn the three straightforward ways you can use.
How to make a vertical line in HTML
There are three main ways that you can use to create a vertical line in HTML.
- Using the border CSS property
- Using width and height CSS properties
- Using the hr transform CSS property.
As you might have noticed, all these methods require you to write some bit of CSS. However, that shouldn’t be a bother as you can “copy – paste” the code provided in this post and tweak it to your liking.
Method 1: Create a Vertical Line with CSS Border-Left and Height Property
The CSS border property is used to draw a line around an HTML element. For example, you can create a border around an HTML <div> or <p> (paragraph) tag.
This section will show you how to create a vertical line using the CSS border-right property. It is a simple trick where you create a border around an HTML element, but only the right side of the border will be visible.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Our Site</title> <style> .vertical-line { border-left: 1px solid #000900; height: 300px; position: absolute; left: 50%; } </style> </head> <body bgcolor="skyblue"> <div class="vertical-line"></div> </body> </html> |
In the code above, there is a <div> tag with a class name “vertical-line.” You will then use CSS to style this <div> tag so that you only have one vertical line.
- border-left: 1px solid #000000: This line will make a border around the <div> tag, but on the left side will be visible as it is assigned a width of 1px and color black.
- height: 300px: This line will give the div a height of 300px. That will make the vertical line have a height of 300px. Feel free to use any other dimensions as required in your projects.
- position: absolute: This property takes the div out of the normal document flow and positions it anywhere on the page. Please note this property is subject to the div’s parent element property style.
- left: 50%: This style will move the div (the vertical line in this case) 50% from the left.
When you open your HTML file on your browser, you should see a vertical line similar to the image below.
Method 2: Create a Vertical Line with CSS Border-Right and Height Property
This method is similar to the previous one. The only difference is that you will be using the border-right property instead of the border-left property we used previously.
Below is the HTML – CSS code snippet.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Our Site</title> <style> .vertical-line-two { height: 300px; border-right: 2px solid red; position: absolute; left: 50%; } </style> </head> <body bgcolor="skyblue"> <div class="vertical-line-two"></div> </body> </html> |
There is a div tag with the class name “vertical-line-two.” Using this class name, you will use CSS to create a vertical line using the right border, as detailed below.
- border-right: 2px solid red: This style will create a border around the div tag. However, only the right side of the border will be visible as it has a width of 2px and is red in color.
- height: 300px: This CSS property will give the div a height of 300px, giving the vertical line a 300px.
- position: absolue: This style will take the div element out of the normal flow of the web page, allowing you to position it anywhere you want. However, that is determined by the property of the div’s parent element.
- left: 50%: This property will move the div 50% from the left. Therefore, your vertical line will be placed at the center of the page, as shown in the image below.
Method 3: Create a Vertical Line with HR Transform Property
HTML has a <hr /> tag that lets you draw a horizontal line on your web page. Since it doesn’t have a tag to draw a vertical line, you can draw a horizontal line and then use the CSS transform property to make it vertical.
Below is the HTML – CSS code snippet for drawing a vertical line with <hr /> tag transform.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Our Site</title> <style> hr { transform: rotate(90deg); border: 1px solid red; } </style> </head> <body bgcolor="skyblue"> <hr /> </body> </html> |
Inside the body tags, there is a <hr /> tag that we are styling using the CSS attributes below.
- transform: rotate(90deg): This CSS property rotates the horizontal line at 90 degrees to create a vertical line on your website.
- border: 1px solid red: This CSS property will draw a border around the vertical line and give it a red color. However, you can omit it if you are okay with a simple white line.
When you open the code above on a browser, you should see a vertical line similar to the image below.
Create Special Vertical Lines in HTML (Double/Dotted/Solid/Dashed)
In Method 1 and Method 2, you learned how to create a vertical line using the CSS border property. As shown in the code below, you can still use this CSS property to create a double, dotted, solid, or dashed vertical line.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Our Site</title> <style> .vertical-line-one{ position: absolute; border-left: 2px dashed red; height: 300px; left: 10%; margin: 5em; } .vertical-line-two{ position: absolute; border-left: 2px dotted brown; height: 300px; left: 25%; margin: 5em; } .vertical-line-three{ position: absolute; border-left: 2px double green; height: 300px; left: 40%; margin: 5em; } .vertical-line-four{ position: absolute; border-left: 2px solid black; height: 300px; left: 55%; margin: 5em; } </style> </head> <body bgcolor="skyblue"> <div class="vertical-line-one">A Dashed Vertical Line</div> <div class="vertical-line-two">A Dotted Vertical Line</div> <div class="vertical-line-three">A Double Vertical Line</div> <div class="vertical-line-four">A Solid Vertical Line</div> </body> </html> |
If you open the code above in a browser, you should see the vertical line below.
Frequently Asked Questions about How to make a vertical line in HTML
Is there an HTML tag to draw a vertical line on a web page?
No. The only tag for drawing a line using HTML is the <hr /> tag which draws a horizontal line. To draw a vertical line, you must use the methods described above.
Should I worry about website responsivity when working with vertical lines?
Vertical lines do not affect the responsiveness of your website. However, if you only want them to appear on a particular screen size, you can use CSS media queries to show or hide them.