column-rule-width

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

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

Browser compatibility