CSS: How to Add a Vertical Line Between Divs – Clean and Responsive Layouts

Adding a vertical line between two <div> elements is a common requirement when designing web layouts—especially for splitting content, creating side-by-side sections, or visually separating components. With modern CSS techniques, you can achieve this effect cleanly and responsively.

In this blog post, you’ll learn multiple ways to add a vertical line between two divs using CSS, along with real-world examples and best practices.

---

🔹 Use Case Example

Imagine you want to create a layout with two columns: text on the left and an image on the right—with a vertical line between them. Here’s how to do it.

---

🔹 Method 1: Using Flexbox and a Divider <div>

✅ HTML

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

✅ CSS

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

.left,
.right {
  flex: 1;
  padding: 20px;
}

.divider {
  width: 2px;
  background-color: #ccc;
  height: 100%;
}

🔍 Result

A thin vertical line (.divider) will appear between the left and right sections, stretching to match the height of its parent container.

---

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

If you don’t want an extra <div>, apply a border to one of the columns:

✅ CSS

.left {
  flex: 1;
  padding: 20px;
  border-right: 2px solid #ddd;
}

.right {
  flex: 1;
  padding: 20px;
}

This applies a vertical line on the right edge of the left column.

---

🔹 Method 3: Add Vertical Line with Pseudo-elements

To avoid extra HTML markup, you can use a pseudo-element like ::after:

✅ CSS

.left {
  position: relative;
  padding-right: 20px;
  flex: 1;
}

.left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #ccc;
}

This inserts a vertical line inside the .left div, at its right edge.

---

🔹 Make It Responsive

When designing for mobile, convert the layout to vertical and hide the divider.

✅ Responsive CSS

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .divider {
    display: none;
  }

  .left {
    border-right: none;
  }

  .left::after {
    display: none;
  }
}

This ensures the layout adapts cleanly on smaller screens.

---

🛠️ Styling Tips

Style Option	CSS Example
Dashed line	border-left: 2px dashed #aaa;
Dotted line	border-left: 2px dotted #999;
Colored line	background-color: #007bff;
Gradient line	Use linear-gradient with background-image

---

✅ Final Thoughts

Adding a vertical line between divs enhances visual structure and makes content easier to scan. Whether you prefer using a dedicated divider, borders, or pseudo-elements, CSS provides a flexible toolkit to meet your design goals.

🔑 Summary

Method	Best For
Extra <div> as .divider	Clear control over the line element
border-left/border-right	Simpler, no extra markup
::after pseudo-element	Clean markup, reusable
Responsive handling	Essential for mobile-friendly designs