column-rule-width

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

IE	Edge	Firefox	Chrome	Safari	Opera
10+	12+	3.5+	4+	3.1+	11.5+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
85+	79+	No	3.2+	All

Related properties

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-span
• column-width
• columns

Specification

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