ADVERTISEMENT
ADVERTISEMENT

How to make a vertical line in HTML using CSS?

In this article, we'll see how we can make a vertical line in HTML using CSS?
Submitted by Apurva Mathur, on June 19, 2022

n HTML we don't have any specific tag which can help us to make a vertical line as we have <hr> tag to make horizontal line. To make vertical line in HTML we'll use border-right, border-left, margin-right and margin-left properties. The properties will set the line in the required format.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>How to make a vertical line in HTML</title>
      <style>
         .verticalLineleft {
         border-left: 6px solid red;
         height: 100px;
         margin-left: 60px;
         }
         .verticalLineright {
         border-right: 6px solid red;
         height: 100px;
         margin-right: 60px;
         }
         .verticalLinecenter{
         border-right: 6px solid red;
         height: 100px;
         margin-right: 50%;
         }
      </style>
   </head>
   <body>
      <div style="background-color: #b3d4fc">
         <center>
            <h2>Vertical line</h2>
         </center>
         <div class="verticalLineleft"></div>
         <div class="verticalLineright"></div>
         <div class="verticalLinecenter"></div>
      </div>
   </body>
</html>

Output:

Example: Make a vertical line in HTML

Explanation:

Left vertical line:

Step 1: Take an empty div and give it a class (Here I've used a class selector to give styling you can use any selector)

Step 2: Use this class to apply CSS under the style tag. I've applied internal CSS, you can directly use inline CSS also.

Step 3: Border-left property will set the line in left most corners; it has three parameters: (width, border-type, color). Height property is given to manage its height and last but not the least margin-left property is optional I've used it here so that it can come closer to the center.

A similar concept is applied when we want the vertical line on the right side or in the center. The only difference is when you want a vertical line in the center, it's important to give margin-left or margin-right property (any one of them) and set its value to 50 % so that it will appear in the center.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.