The vertical lines are usable elements for the forms, tables, and other functionalities of the HTML. We can create single and multiple lines using CSS properties. We can set the border to get the vertical line; otherwise, rotate the html <hr> tag using CSS property.
Syntax
The given syntax is employed to create a vertical line in CSS.
border-left: 5px solid black;
OR
border-right: 5px solid black;
OR
border-width: 0 5px 0 5px;
border-color: Grey;
border-style: double;
Examples
The subsequent instances demonstrate the vertical bar with the specified color, thickness, height, and additional CSS properties.
Example 1
The sample demonstrates the utilization of the border-left CSS attribute to create a vertical line with a fundamental color and thickness.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: lightgrey;
border: 1px solid black;
height: 200px;
width: 280px;
}
.vertical_lines{
border-left: 5px solid black;
height: 80px;
position: absolute;
left: 5%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see simple and easy vertical lines.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>
Output:
The output shows a basic vertical line using CSS.
Example 2
The code snippet demonstrates the utilization of the border-right CSS property to create a vertical line with a specified color and thickness.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: lightgrey;
border: 1px solid black;
height: 200px;
width: 280px;
}
.vertical_lines{
border-right: 5px solid red;
height: 80px;
position: absolute;
left: 5%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see a simple vertical line per the required size and color.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>
Output:
The output shows a basic vertical line using CSS.
Example 3
The sample demonstrates the vertical bar created using the CSS attributes border-left and border-right, specifying both the color and dimensions.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: lightgrey;
border: 1px solid black;
height: 200px;
width: 280px;
}
.vertical_lines{
border-right: 5px solid red;
border-left: 5px solid red;
width:20px;
height: 80px;
position: absolute;
left: 5%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see two simple vertical lines per the required size and color.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>
Output:
The output shows two vertical lines using CSS.
Example 4
The illustration demonstrates the vertical bar utilizing dual border attributes.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: lightgrey;
border: 1px solid black;
height: 200px;
width: 280px;
}
.vertical_lines{
border-right: 5px double black;
border-left: 5px double red;
width:20px;
height: 80px;
position: absolute;
left: 5%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see two simple vertical lines per the required size and color.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>
Output:
The result displays the dual vertical bars utilizing CSS.
Example 5
The illustration demonstrates two vertical bars at the beginning and end of the div element or its content. Vertical lines can be generated on any container by utilizing the left and right borders of the element.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 150px;
width: 320px;
border-right: 8px solid navy;
border-left: 8px solid navy;
position: absolute;
left: 5%;
padding-left: 2%
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see two simple vertical lines per the required size and color.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>
Output:
The result displays the two vertical bars on the primary div element.
Example 6
The example illustrates the vertical borders of the div element or content using border attributes. By manipulating properties such as border width, style, and color, we can generate vertical lines within any container.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 150px;
width: 320px;
border-width: 0 5px 0 5px;
border-color: Grey;
border-style: double;
position: absolute;
left: 2%;
padding-left: 1%;
padding-right: 1%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS with Border Width
</h3>
<p id = "class2">
We can see two simple vertical lines per the required width, style, and color.
</p>
</div>
</body>
</html>
Output:
The result displays the vertical lines along the width border of the div element.
Conclusion
The vertical bar in CSS effectively delineates containers and other elements, enhancing the appearance of web pages, tables, and forms.