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 the 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:

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

General Info

Default Value	medium
Inherited	No
JavaScript Usage	element.style.columnRuleWidth = “8px”