Avatar of Geoff Graham
Geoff Graham on (Updated on )

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;


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;


Browser support

Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
Source: caniuse


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