📚 CSS column-rule — Complete Tutorial

🌐 What Is column-rule?

The column-rule property is a **shorthand** used to define thewidth, style, and color of the vertical line that appears between text columns in a CSS Multi-Column Layout. It behaves similarly to the border shorthand but applies **only between columns**, not around the container.

>>“column-rule = width + style + color — all in one clean declaration.”

Note

✔ Only works with multi-column layout
✔ Expands into:
  • column-rule-width
  • column-rule-style
  • column-rule-color

📦 Syntax

column-rule syntax

column-rule: <width> <style> <color>;

Only style is required for the rule to appear; width & color are optional but usually included.

📌 1. Basic Example — Simple Solid Rule

Basic solid rule

.content {
  column-count: 2;
  column-rule: 2px solid #333;
}

Creates a 2px solid dark gray divider between columns.

📌 2. Using Dotted Column Rule

Dotted rule

.article {
  column-count: 3;
  column-rule: 3px dotted #4a90e2;
}

Produces a dotted divider — good for soft or playful design.

📌 3. Dashed Column Rule

Dashed

.post {
  column-count: 2;
  column-rule: 3px dashed crimson;
}

Works well to add structure without being too bold.

📌 4. Double Rule — Elegant Magazine Look

Double rule

.mag {
  column-count: 3;
  column-rule: 4px double #555;
}

Gives a premium, print-style feel to multi-column content.

📌 5. Using Only Style (Width & Color Default)

Only style

.simple {
  column-count: 2;
  column-rule: solid; /* width defaults to medium, color defaults to currentcolor */
}

Quick and simple, but not recommended for precise control.

📌 6. Using Custom Width Units

Custom widths

.wide-rule {
  column-count: 2;
  column-rule: 0.4rem solid orange;
}

Relative units allow responsive scaling.

📌 7. Combine With column-gap

Rule + Gap

.layout {
  column-count: 3;
  column-gap: 40px;
  column-rule: 4px solid #999;
}

Larger gaps provide room for thicker rules.

📌 8. The Rule Appears Between Columns Only

Column rules are inner dividers:

No rule on edges

/* This will NEVER draw a rule on the left or right edge */
.container {
  column-count: 3;
  column-rule: 3px solid #000;
}

Note

Column rules appear only between columns — never before the first or after the last.

🧪 Real-World Examples

1️⃣ Newspaper / Magazine Layout

Newspaper

.news {
  column-count: 3;
  column-gap: 30px;
  column-rule: 2px solid #ccc;
}

2️⃣ Multi-Column Blog Layout

Blog

.blog {
  column-count: 2;
  column-rule: 3px dashed #ff9800;
}

3️⃣ Print-Style Chapter Layout

Print layout

@media print {
  .chapter {
    column-count: 2;
    column-rule: 1px solid black;
  }
}

⚠️ Common Mistakes

  • ❌ Setting only width — rule won't appear without style
  • ❌ Expecting rule outside the container edges (it doesn't show there)
  • ❌ Using very thick rules with small gaps (cramped layout)
  • ❌ Forgetting that rules do not affect layout flow (purely decorative)

Note

Always specify at least:column-rule: width style.

🔥 Summary

The column-rule shorthand is the cleanest way to style the vertical dividers between columns in a multi-column layout. With just one line, you control thickness, line type, and color. This property adds structure, readability, and beauty to text-heavy designs.

>>“A well-styled column rule separates content cleanly and elevates the reading experience.”

Learn more → MDN Docs 📘