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” |
