How to 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.

    


    

        To Create a Vertical Line with CSS
    
    

        In this example we have used border-
        left property to create a vertical
        line with CSS.
    
    

        

    

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.

    


    

        To Create a Vertical Line with CSS
    
    

        In this example we have used rotate
         function with hr tag to create a
        vertical line with CSS.
    
    

        

    

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.

    
    


    

        To Create a Vertical Line with CSS
    
    

        In this example we have used block
         element with height 
        and width properties to create 
        a vertical line with CSS.
    
    

Note: All block elements can be used in similar way as above approach except

,

,

and .

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.