column-rule-width

Avatar of Geoff Graham
Geoff Graham on

The column-rule-width CSS property sets the thickness of the line that is drawn between columns by column-rule-style in a CSS multi-column layout.

.columns {
  columns: 2 600px;
  column-rule-style: dotted;
  column-rule-width: 3px;
}

Another way to go about it is to use the column-rule shorthand property, which combines column-rule-width, column-rule-style and column-rule-color.

.columns {
  columns: 2 600px;
  column-rule: dotted 3px #f8a100;
}

Syntax

column-rule-width: thin | medium | thick | <length>
  • Initial value: medium
  • Applies to: multi-column containers
  • Inherited: no
  • Computed value: absolute length; 0 if the column-rule-style is none or hidden
  • Animation type: by computed value type

Values

column-rule-width takes a single named, length or global value.

/* Named values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Length values */
column-rule-width: 15px;
column-rule-width: 1.5rem;

/* Global values */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: unset;

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)