🎨 CSS column-rule-color — Complete Tutorial

🌐 What Is column-rule-color?

The column-rule-color property sets thecolor of the line (called a column rule) that appears between columns in a CSS Multi-Column Layout. Think of it like a border color, but specifically for columns.

>>“Use column-rule-color to highlight or style the dividing lines between your multi-column text.”

Note

✔ Works only with multi-column layout
✔ Requires column-rule-style and/or column-rule-width to be visible
✔ Similar to setting border colors

📦 Syntax

column-rule-color syntax

column-rule-color: <color>;
ValueDescription
<color>Any CSS color value (hex, rgb, hsl, named colors, etc.)

📌 1. Basic Example — Set Column Rule Color

Simple colored column rule

.content {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 3px;
  column-rule-color: #4a90e2; /* Blue rule */
}

A blue vertical line appears between the 3 columns.

📌 2. Using RGBA for Transparent Column Rules

Transparent rule

.article {
  column-count: 2;
  column-rule: 4px solid rgba(0, 0, 0, 0.3);
}

Creates a soft, semi-transparent divider.

📌 3. Using HSL Colors

HSL rule color

.magazine {
  column-count: 3;
  column-rule-width: 2px;
  column-rule-style: dashed;
  column-rule-color: hsl(340, 80%, 60%);
}

HSL is great for visually consistent themes.

📌 4. Customizing Column Rule Without Separate Properties

Shorthand version

.content {
  column-count: 3;
  column-rule: 5px dotted crimson;
}

column-rule shorthand includes width, style, and color.

📌 5. Gradient-Like Divider Using Repeating Linear Gradient

Fancy gradient rule

.fancy {
  column-count: 3;
  column-gap: 40px;
  column-rule-width: 6px;
  column-rule-style: solid;
  column-rule-color: transparent;
  background: repeating-linear-gradient(
    to right,
    #0000 0,
    #0000 1px,
    #ff6b6b 1px,
    #ff6b6b 3px
  );
}

Creates artistic rules using background tricks.

📌 6. Using CSS Variables for Rule Color

Variables

:root {
  --rule-color: #8e44ad;
}

.text {
  column-count: 2;
  column-rule: 3px solid var(--rule-color);
}

Makes theme updates easy.

🧪 Real-World Examples

1️⃣ Magazine Layout

Magazine style

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

2️⃣ Blog Content Divider

Blog columns

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

3️⃣ Fancy Editorial Layout

Editorial

.editorial {
  column-count: 4;
  column-gap: 60px;
  column-rule: 5px double #4caf50;
}

⚠️ Common Mistakes

  • ❌ Setting column-rule-color without width or style → rule not visible
  • ❌ Expecting rule to appear outside the container (it stays inside columns)
  • ❌ Using thick rules with small column-gaps → bad readability

Note

A rule only appears between columns — not before the first or after the last.

🔥 Summary

The column-rule-color property controls the color of the dividing line between columns in a multi-column layout. It’s often used with column-rule-width andcolumn-rule-style to create elegant and readable layouts.

>>“The column rule color subtly guides the reader’s eye across multi-column text.”

Learn more →MDN Docs 📘