column-rule-color

The column-rule-color CSS property determines the color of a line between columns in a CSS multi-column layout.

The property can’t act alone! In order to see the color, we need to make the line — technically called a “rule” — between columns. That requires the column-rule-style property.

.columns {
  column-count: 2 600px;
  column-rule-style: solid;
  column-rule-color: #f8a100;
}

Or, we can use the column-rule shorthand property, which combines column-rule-color, column-rule-style and column-rule-width in a single declaration.

column-rule: 3px solid #f8a100;

Syntax

column-rule-color takes a single color value. That can be any valid CSS color, including hex, RGB, RGBa, HSL, HSLa, and named colors. It even accepts currentColor as a value.

column-rule-color: #f8a100;
column-rule-color: hsl(39,100,49);
column-rule-color: rgb(250,162,0);
column-rule-color: aliceblue;
column-rule-color: currentColor;

Demo

Browser support

Related properties

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns

Specification

CSS Multi-column Layout Module Level 1 (Editor’s Draft)