Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a vertical line with CSS?
To create a vertical line with CSS, is a simple process that can be achieved using various approaches. A vertical line can be useful for dividing content, creating visual separators, or enhancing the layout design of your webpage.
Syntax
/* Method 1: Using border */
.vertical-line {
border-left: width style color;
height: value;
}
/* Method 2: Using transform rotate */
.horizontal-element {
transform: rotate(90deg);
}
/* Method 3: Using width and height */
.line-element {
width: thin-width;
height: desired-length;
background-color: color;
}
Method 1: Using border-left Property
The most common approach is to use the border-left property, which creates a left border that appears as a vertical line when applied to an element with specified height.
Example
Here is a complete example creating a vertical line using the border-left property −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.vertical-line {
border-left: 4px solid #800080;
height: 300px;
}
</style>
</head>
<body>
<h3>Vertical Line using border-left</h3>
<div class="container">
<div class="vertical-line"></div>
</div>
</body>
</html>
A purple vertical line (4px wide, 300px tall) appears centered on the page.
Method 2: Using transform rotate Function
This approach uses the transform property with rotate function to rotate a horizontal element by 90 degrees, creating a vertical line.
Example
Here is an example using the rotate() function with an hr element −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rotated-line {
width: 300px;
border: 2px solid #ff6600;
transform: rotate(90deg);
}
</style>
</head>
<body>
<h3>Vertical Line using rotate function</h3>
<div class="container">
<hr class="rotated-line">
</div>
</body>
</html>
An orange vertical line appears centered on the page, created by rotating a horizontal rule 90 degrees.
Method 3: Using Block Element with Width and Height
This method creates a vertical line by setting a very small width and desired height on a block element, then applying a background color.
Example
Here is an example creating a vertical line using width and height properties −
<!DOCTYPE html>
<html>
<head>
<style>
.line-block {
width: 3px;
height: 250px;
background-color: #008000;
margin: 50px auto;
}
</style>
</head>
<body>
<h3>Vertical Line using block element</h3>
<div class="line-block"></div>
</body>
</html>
A green vertical line (3px wide, 250px tall) appears centered horizontally on the page with a 50px top margin.
Comparison
| Method | Best Use Case | Advantages |
|---|---|---|
| border-left | Simple separators | Clean code, easy styling |
| transform rotate | When you have horizontal elements | Reuses existing elements |
| width + height | Custom styled lines | Full control over appearance |
Conclusion
Creating vertical lines with CSS can be accomplished through multiple methods, each suitable for different scenarios. The border-left approach is most commonly used for its simplicity and clean implementation.
4K+ Views
