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>
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>
OUTPUT
3) Vertical line using hr Transform 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>
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>
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>
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>
OUTPUT
