The column-rule-width CSS property sets the width of the line drawn between columns in a multi-column layout.

/* Keyword values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick;  /* <length> values */ column-rule-width: 1px; column-rule-width: 2.5em;  /* Global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: revert; column-rule-width: unset; 

column-rule-width

The column-rule-width CSS property sets the width of the line drawn between columns in a multi-column layout.

Syntax

/* Keyword values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick;  /* <length> values */ column-rule-width: 1px; column-rule-width: 2.5em;  /* Global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: revert; column-rule-width: unset; 

The column-rule-width property is specified as a single <'border-width'> value.

Values

<'border-width'>

Is a keyword defined by border-width describing the width of the rule. It may be either a <length> or one of the thin, medium, or thick keywords.

Formal definition

Initial value	medium
Applies to	multicol elements
Inherited	no
Computed value	the absolute length; 0 if the column-rule-style is none or hidden
Animation type	a length

Formal syntax

<'border-width'>

Examples

Setting a thick column rule

HTML

<p>This is a bunch of text split into three columns.    The `column-rule-width` property is used to change    the width of the line that is drawn between columns.    Don't you think that's wonderful?</p> 

CSS

p {   column-count: 3;   column-rule-style: solid;   column-rule-width: thick; } 

Result

Specifications

Specification
CSS Multi-column Layout Module Level 2 # crw

See also

Multiple-column Layout column-rule-style column-rule-color column-rule

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語中文 (简体) Change language