column-rule-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

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

Try it

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: revert-layer;
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

column-rule-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

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 1 # crw

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`column-rule-width`	501	1212	523.5–74	11.115	93	5018	524	11.114	91	5.01.0	504.4