CSS: How to Add a Vertical Line – Clean Dividers for Modern Layouts

Vertical lines are a subtle yet powerful design element in web development. Whether you’re dividing content, creating timelines, or enhancing layouts, a vertical line adds structure and clarity to your webpage.

In this blog, you’ll learn how to add a vertical line using CSS, with multiple methods, real-world examples, and best practices.

---

🔹 Method 1: Using a <div> with Fixed Height and Border

This is the most straightforward and flexible way to add a vertical line.

✅ HTML

<div class="vertical-line"></div>

✅ CSS

.vertical-line {
  width: 1px;
  height: 100px;
  background-color: #333;
}

This creates a 1-pixel-wide vertical line that’s 100 pixels tall.

---

🔹 Method 2: Using border-left or border-right

Perfect for creating a vertical divider between two sections.

✅ HTML

<div class="container">
  <div class="left">Left</div>
  <div class="divider"></div>
  <div class="right">Right</div>
</div>

✅ CSS

.container {
  display: flex;
  align-items: center;
}

.divider {
  border-left: 2px solid #ccc;
  height: 80px;
  margin: 0 20px;
}

This gives a clean vertical line between two flexbox items.

---

🔹 Method 3: Full-Height Vertical Line

To create a vertical line that spans the entire height of the viewport:

.full-height-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #aaa;
}

Useful for layouts that need a vertical guide or divider down the center.

---

🔹 Method 4: Vertical Line with Pseudo-elements

If you don’t want to add extra HTML, use a ::before or ::after pseudo-element.

.vertical-text::after {
  content: "";
  display: block;
  width: 1px;
  height: 100px;
  background: #000;
  margin: 10px auto;
}

This adds a line after the text block, ideal for timeline or section styling.

---

🛠️ Styling Tips

Style	Example
Dashed line	border-left: 1px dashed #ccc;
Dotted line	border-left: 1px dotted #666;
Colored line	background-color: red;
Shadowed line	Use box-shadow for depth

---

🔹 Responsive Vertical Line

If your layout shifts on smaller screens, make sure the vertical line adapts:

@media (max-width: 600px) {
  .divider {
    border-left: none;
    border-top: 1px solid #ccc;
    width: 100%;
    height: 1px;
  }
}

This switches the vertical line to horizontal on mobile for better readability.

---

✅ Final Thoughts

Adding a vertical line in CSS is simple but opens up many creative layout options—from elegant dividers to advanced visual structures. You can use borders, backgrounds, or pseudo-elements depending on the context.

💡 Summary

Method	Best Use
background-color on narrow <div>	Standalone vertical line
border-left or border-right	Section divider
::before or ::after	Decorative, no extra HTML
Full-height with position: absolute	Layout guides or timelines