column-rule-width

Geoff Graham on Updated on
##description##
Ad
`, } ); } })();

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>

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

Specification

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