To make a vertical line, use the border-left or border-right property. The height property is used to set the height of the border (vertical line) element. The position property is used to set the position of vertical line.
Example 1: It creates a vertical line using border-left, height, and position properties.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML border Property
</title>
<style>
.vertical {
border-left: 6px solid black;
height: 200px;
position:absolute;
left: 50%;
}
</style>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">
GeeksForGeeks
</h1>
<div class = "vertical"></div>
</body>
</html>
|
Output:
Example 2: It creates a vertical line using border-left and height properties.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML border Property
</title>
<style>
.vertical {
border-left: 5px solid black;
height: 200px;
}
</style>
</head>
<body>
<h1 style= "color: green;">
GeeksForGeeks
</h1>
<div class= "vertical"></div>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Opera
- Safari
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.