📏 CSS column-rule-width — Complete Tutorial

🌐 What Is column-rule-width?

The column-rule-width property defines thethickness of the vertical divider (called a column rule) that appears between columns in a CSS Multi-Column Layout. It works similarly to border-width but applies only between the columns inside the container.

>>“Use column-rule-width to control how bold or subtle the divider looks between your text columns.”

Note

✔ Works only when using multi-column layout
✔ Always combine with column-rule-style and optionally column-rule-color
✔ Accepts any CSS length (px, em, rem, etc.)

📦 Syntax

column-rule-width syntax

column-rule-width: thin | medium | thick | <length>;
ValueDescription
thinBrowser-defined thin width (usually 1px)
mediumBrowser default thickness (often 3px)
thickBrowser-defined thick width (around 5px)
<length>Custom width like 2px, 0.2rem, 4pt

📌 1. Basic Example — Solid Column Rule Width

Simple rule width

.content {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 4px;
  column-rule-color: #555;
}

Adds a 4px solid gray divider between all columns.

📌 2. Using Keyword Widths

Keyword widths

.article {
  column-count: 2;
  column-rule-style: solid;
  column-rule-width: thick; /* browser-defined */
}

Ideal for bold and readable partitions.

📌 3. Thin Dotted Rule

Thin dotted

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

Useful for decorative or soft-line column dividers.

📌 4. Using column-rule-width With column-gap

Gap + width

.layout {
  column-count: 3;
  column-gap: 50px;
  column-rule-style: solid;
  column-rule-width: 6px;
  column-rule-color: #333;
}

Wider gaps allow thicker rules without affecting readability.

📌 5. Custom Width With Em/Rem Units

Relative units

.content {
  column-count: 2;
  column-rule-style: solid;
  column-rule-width: 0.3rem;
  column-rule-color: crimson;
}

Relative units scale properly with responsive typography.

📌 6. Using Shorthand column-rule

Shorthand

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

column-rule sets width + style + color in one declaration.

🧪 Real-World Examples

1️⃣ Magazine / Newspaper Layout

Newspaper columns

.news {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: #ccc;
}

2️⃣ Two-Column Blog Article

Blog style

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

3️⃣ Elegant Book Layout for Print

Print layout

@media print {
  .chapter {
    column-count: 2;
    column-rule-style: solid;
    column-rule-width: thin;
    column-rule-color: black;
  }
}

⚠️ Common Mistakes

  • ❌ Only setting width — without style, rule won’t show
  • ❌ Very thick rules combined with small gaps make text look cramped
  • ❌ Expecting the rule to appear on the container edges (it only appears between columns)

Note

A visible column rule needs at least:column-rule-width + column-rule-style.

🔥 Summary

The column-rule-width property controls how thick the dividing line between columns appears in a multi-column layout. Whether you're designing articles, magazines, blogs, or print layouts, adjusting the rule width enhances readability and adds aesthetic clarity.

>>“A clear and well-sized column rule improves reading flow and gives structure to long text.”

Learn more →MDN Docs 📘