We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The column-rule-width CSS property sets the width of the rule (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: 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 syntax

<'border-width'>

Example

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 Status Comment
CSS Multi-column Layout Module
The definition of 'column-rule-width' in that specification.
Working Draft Initial definition.

Initial valuemedium
Applies tomulticol elements
Inheritedno
Mediavisual
Computed valuethe absolute length; 0 if the column-rule-style is none or hidden
Animation typea length
Canonical orderper grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

50

Yes -webkit-

12 -webkit-

50

3.5 -moz-

10

11.1

15 -webkit-

3 -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes

50

Yes -webkit-

Yes -webkit-

50

Yes -moz-

? ?

5.0

Yes -webkit-