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 valuemedium
Applies tomulticol elements
Inheritedno
Computed valuethe absolute length; 0 if the column-rule-style is none or hidden
Animation typea 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

Browser compatibility

BCD tables only load in the browser

See also