CSS column-rule-color Property

What You’ll Learn

The column-rule-color property sets the color of divider lines between columns — the longhand color piece of the column-rule shorthand.

Definition and Usage

The column-rule-color CSS property specifies the color of the line drawn between columns in a multi-column layout. It enhances visual separation between columns, making content more readable and aesthetically pleasing.

Use it when you already have column-rule-width and column-rule-style set (or the column-rule shorthand) and want to control the divider color separately — for example, to match your brand palette.

📝 Syntax

The syntax for column-rule-color accepts any valid CSS color value:

selector {
  column-rule-color: color;
}

Basic Example

.columns {
  column-count: 3;
  column-gap: 20px;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: blue;
}

Syntax Rules

• The initial value is currentcolor (matches the element’s text color).
• Accepts named colors, hex, rgb, hsl, and CSS variables.
• Works only when a visible column rule exists (style not none).
• Part of the column-rule shorthand: column-rule: 2px solid blue;.
• Pair with column-count and column-gap on multi-column containers.

💎 Property Values

The column-rule-color property accepts standard CSS color values.

Longhand in the column-rule Family

Examples Gallery

Try a blue rule, hex brand color, HSL value, and a CSS variable theme color.

<style>
  .columns {
    column-count: 3;
    column-gap: 20px;
    column-rule-style: solid;
    column-rule-width: 2px;
    column-rule-color: blue;
  }
</style>

<div class="columns">...</div>

.brand-columns {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid;
  column-rule-color: #7c3aed;
}

.muted-rule {
  column-count: 3;
  column-gap: 1.5rem;
  column-rule: 1px dashed;
  column-rule-color: hsl(215 16% 65%);
}

:root {
  --rule-color: #0ea5e9;
}

.themed {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 2px solid;
  column-rule-color: var(--rule-color);
}

💡 Best Practices