You might have a couple of reasons to create a vertical line on your web page but HTML does not have any element for vertical lines. Although HTML only have the element for a horizontal line; but still there are multiple ways to create a vertical line in HTML as mentioned below:
- Using Border CSS Property
- Using width and height CSS Property
- Using hr Transform Property
Here in this article, we have explained all possible ways to create Vertical line in HTML:
1) Using Border-Right, Height and Position CSS Property
<!-- It creates a vertical line using border-right, height and position property. --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> /* Applying the style on the complete body of html page */ body { text-align: center; } /* CSS to add vertical line in the right */ .verticalLine { height: 300px; border-right: 1px solid #000900; position: absolute; right: 50%; } </style></head><body> <h1>Vertical Line using HTML and CSS</h1> <div class="verticalLine"> <!-- Dummy Text start --> <p> using border-right, height and position property </p> <!-- Dummy Text ends --> </div></body></html>Run Code
OUTPUT
2) Vertical line using Border-Left, Height, and Position CSS Property
<!-- It creates a vertical line using border-left, height and position property. --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> /* Applying the style on complete body of html page */ body { text-align: center; } /* CSS to add vertical line in the left */ .verticalLine { height: 300px; border-left: 1px solid #000900; position: absolute; left: 50%; } </style></head><body> <h1>Vertical Line using HTML and CSS</h1> <div class="verticalLine"> <!-- Dummy Text start --> <p> vertical line using border-left, height and position property </p> <!-- Dummy Text ends --> </div></body></html>Run Code
See Also
How to View the HTML Source Code of a Web PageHow to Test HTML Code in a Browser? | BrowserStackHarvardKey - Harvard University Authentication ServiceHTML EditorsOUTPUT
3) Vertical line using hrTransform Property
A vertical line can be created in HTML using transform property in <hr> tag. With the help of this property, you can rotate a horizontal line to a vertical line.
<!-- HTML code to demonstrate vertical lines from horizontal line using transform function --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> body { text-align: center; } hr { transform: rotate(90deg); } </style></head><body> <h1>Vertical Line using hr Transform Property</h1> <hr></body></html>Run Code
OUTPUT
4) Double Vertical line using CSS Property
<!-- It creates a double vertical line using border-right, height and position property . --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> /* Applying the style on complete body of html page */ body { text-align: center; } /* CSS to add vertical line in the right */ .verticalLine { height: 300px; border-style: none double none none; position: absolute; right: 50%; } </style></head><body> <h1>Vertical Line using HTML and CSS</h1> <div class="verticalLine"> <!-- Dummy Text start --> <p> double vertical line </p> <!-- Dummy Text ends --> </div></body></html>Run Code
OUTPUT
5) Create Multiple Types (Double, Solid, Dashed, Dotted)Vertical Lines
<!-- Html code to demonstrate the multiple type of vertical lines --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> div.dotted { border-style: none dotted none none; margin: 10px; padding: 10px; right: 55.5%; position: absolute; } div.dashed { border-style: none dashed none none; margin: 10px; padding: 10px; right: 66%; position: absolute; } div.solid { border-style: none solid none none; margin: 10px; padding: 10px; right: 77%; position: absolute; } div.double { border-style: none double none none; margin: 10px; padding: 10px; right: 88%; position: absolute; } </style></head><body> <h1>Vertical Line using HTML and CSS</h1> <div class="dotted">dotted vartical line.</div> <div class="dashed">dashed vartical line.</div> <div class="solid">solid vartical line.</div> <div class="double">double vartical line.</div></body></html>Run Code
OUTPUT
8) Create Vertical Lines using Paragraph, Section and Article Containers
<!-- HTML code to demonstrate vertical lines on different containers --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> body { text-align: center; } .paragraphWithVertcalLine { border-right: 1px solid #000; width: 300px; height: 300px; } .sectionWithVertcalLine { border-right: 1px solid #000; width: 300px; height: 300px; } .articleWithVertcalLine { border-right: 1px solid #000; width: 300px; height: 300px; } </style></head><body> <p class="paragraphWithVertcalLine"> vertical line with paragraph container </p> <section class="sectionWithVertcalLine"> vertical line with paragraph section container </section> <article class="articleWithVertcalLine"> vertical line with article container </article></body></html>Run Code
OUTPUT
