🎨 CSS column-rule-style — Complete Tutorial

🌐 What Is column-rule-style?

The column-rule-style property defines theline style used for the vertical divider (column rule) between columns in a CSS Multi-Column Layout. It works similarly to border-style, but is applied only between columns — not around the container.

>>“Use column-rule-style to control how the dividing line appears between text columns — solid, dashed, dotted, double, and more.”

Note

✔ Part of Multi-Column Layout
✔ Controls the visual type of the rule
✔ Requires column-rule-width and/or column-rule-color to be visible

📦 Syntax

column-rule-style syntax

column-rule-style: 
  none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset;

📌 Available Column Rule Styles

StyleDescription
noneNo rule is drawn.
solidSingle solid line.
dottedDot pattern line.
dashedDash pattern line.
doubleTwo parallel lines.
groove3D-style carved effect.
ridge3D-style raised effect.
insetEmbossed inner effect.
outsetEmbossed outer effect.

📌 1. Basic Solid Column Rule

Solid rule

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

Creates a clean, simple divider line between columns.

📌 2. Dotted Line Between Columns

Dotted

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

Perfect for decorative or soft-themed layouts.

📌 3. Dashed Column Divider

Dashed

.post {
  column-count: 2;
  column-rule-style: dashed;
  column-rule-width: 3px;
  column-rule-color: #e74c3c;
}

A dashed rule adds a modern, stylized feel.

📌 4. Double Line — Magazine Style

Double

.magazine {
  column-count: 3;
  column-rule-style: double;
  column-rule-width: 4px;
  column-rule-color: #666;
}

Great for printed, elegant layouts like newspapers or reports.

📌 5. Using 3D Styles (groove, ridge, inset, outset)

3D effects

.modern {
  column-count: 2;
  column-rule-width: 6px;
  column-rule-style: groove;
  column-rule-color: #888;
}

3D rule styles provide depth for fancy editorial designs.

📌 6. Using Shorthand column-rule

Shorthand version

.content {
  column-count: 3;
  column-rule: 5px solid #9b59b6;
}

Shorthand combines width, style, and color in a single declaration.

🧪 Real-World Examples

1️⃣ Editorial Article

Editorial layout

.editorial {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: #bbb;
}

2️⃣ Blog Layout

Blog columns

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

3️⃣ Multi-Column Legal Document

Legal doc

.legal {
  column-count: 3;
  column-rule: 1px dotted #555;
}

⚠️ Common Mistakes

  • ❌ Setting column-rule-style without width — rule may not appear
  • ❌ Using thick dotted/dashed rules with tiny gaps → readability issues
  • ❌ Expecting rule outside edges (it only appears between columns)

Note

If the rule isn't visible, ensure you set style + width + color.

🔥 Summary

The column-rule-style property controls the **visual style** of the divider between columns in a multi-column layout. You can choose from solid, dotted, dashed, double, or decorative 3D styles to achieve the perfect look for your design.

>>“Column rule styles bring structure and personality to multi-column text layouts.”

Learn more →MDN Docs 📘