CSS column-rule-width Property

CSS column-rule-width property sets the thickness of the column rule in a multi-column layout. A column rule is a vertical line that separates adjacent columns in a multi-column layout.

It can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, etc. It also accepts keywords like ‘thin’, ‘thick’, ‘medium’, etc. Try out the example below to see how it works:

Example:

div{
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 8px;
}

Set a thin column rule using keyword ‘thin’.

Example:

div{
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thin;
}

CSS Syntax

The column-rule-width property has the following syntax:

column-rule-width: length|thin|medium|thick|initial|inherit;

Property Values

The column-rule-width property accepts the following values:

lengthSets the width of the rule in CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
thinSets a thin rule.
mediumSets a medium rule. This is the default value.
thick Sets a thick rule.
initialSets the column-rule-width property to its default value(medium).
inheritInherits the column-rule-width property from the parent element.

General Info

Default Valuemedium
InheritedNo
JavaScript Usageelement.style.columnRuleWidth = “8px”