Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Vertical Line with CSS
To create a vertical line with CSS, is a simple process that can be done using various approaches. In this article, we will learn and understand three different approaches for creating a vertical line with CSS
We are using border and some block elements in this article, our task is to create a vertical line with CSS.
Approaches to Create a Vertical Line
Here is a list of approaches to create a vertical line with CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Creating Vertical Line using border-left Property
- Creating Vertical Line using rotate Function
- Creating Vertical Line using block Element
Creating Vertical Line using border-left Property
To create a vertical line with CSS, we will be using border-left property which creates a left border around an element. We will be adjusting it's height to create a line.
- We have used wrap class to create a flex container using display property which centers the vertical line using CSS justify-content and align-items property.
- Then, we have used vLine class to create a vertical line using border-left property and set it's height.
Example
Here is a complete example code implementing above mentioned steps to create a vertical line using CSS border-left property.
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.vLine {
border-left: 4px solid #800080;
height: 300px;
}
</style>
</head>
<body>
<h3>
To Create a Vertical Line with CSS
</h3>
<p>
In this example we have used <strong>border-
left</strong> property to create a vertical
line with CSS.
</p>
<div class="wrap">
<div class="vLine"></div>
</div>
</body>
</html>
Creating Vertical Line using rotate Function
In this approach to create a vertical line with CSS, we will be using rotate function of transform property on HTML hr tag which is used to create a horizontal line.
- We have used div as element selector to center the vertical line using flex properties similar to approach one.
- We have used "transform: rotate(90deg);" which rotates the horizontal line by 90 degree making it a vertical line and we have used CSS width property to define it's length.
Example
Here is a complete example code implementing above mentioned steps to create a vertical line using CSS rotate() function.
<html>
<head>
<style>
div {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
hr {
width: 400px;
transform: rotate(90deg);
}
</style>
</head>
<body>
<h3>
To Create a Vertical Line with CSS
</h3>
<p>
In this example we have used <strong>rotate
</strong> function with hr tag to create a
vertical line with CSS.
</p>
<div>
<hr>
</div>
</body>
</html>
Creating Vertical Line using block Element
In this approach we will be using HTML block elements along with CSS height and width properties to create a vertical line with CSS.
- We have used vLine class to create and design the vertical line.
- We have used "width: 2px;" which reduces the width and increased the length using CSS height property making it appear as a straight line.
- After creating the line we have used CSS background-color to change it's color and "margin: 0 auto;" centers the vertical line.
Example
Here is a complete example code implementing above mentioned steps to create a vertical line using block elements.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.vLine {
width: 2px;
height: 300px;
background-color: #800080;
margin: 0 auto;
}
</style>
<title>Vertical Line Example</title>
</head>
<body>
<h3>
To Create a Vertical Line with CSS
</h3>
<p>
In this example we have used <strong>block
</strong> element with <strong>height</strong>
and <strong>width</strong> properties to create
a vertical line with CSS.
</p>
<article class="vLine"></article>
</body>
</html>
Note: All block elements can be used in similar way as above approach except <fieldset>, <ol>, <ul> and <tfoot>.
Conclusion
To create a vertical line with CSS is a simple process and can be created using CSS properties. In this article we have discussed three approaches to create a vertical line with CSS which are by using CSS border-left property, rotate() function and by using HTML block elements.
3K+ Views
