column-rule-color

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

IEEdgeFirefoxChromeSafariOpera
10+12+3.5+4+3.1+11.5+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
85+79+No3.2+All
Source: caniuse

Specification

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