Avatar of Geoff Graham
Geoff Graham on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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;


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


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;


Browser support

Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
Source: caniuse


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