The column-rule-width
CSS property lets you set the width of the rule drawn between columns in multi-column layouts.
/* 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;
Initial value | medium |
---|---|
Applies to | multicol elements |
Inherited | no |
Media | visual |
Computed value | the absolute length; 0 if the column-rule-style is none or hidden |
Animation type | a length |
Canonical order | per grammar |
Syntax
A single <br-width>
value.
Values
- <br-width>
- Is a
<length>
or one of thethin
,medium
orthick
keyword describing the width of the rule separating two columns.
Formal syntax
<'border-width'>
Example
#header { column-rule-width: thick; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-rule-width' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 50 Yes -webkit- | Yes -webkit- | 50 3.5 -moz- | 10 | 11.1 15 -webkit- | 3 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | 50 Yes -webkit- | Yes -webkit- | 50 Yes -moz- | ? | ? | ? |
Document Tags and Contributors
Tags:
Contributors to this page:
ddbeck,
mfluehr,
wbamberg,
chrisdavidmills,
erikadoyle,
fscholz,
jpmedley,
Prinz_Rana,
Sebastianz,
jsx,
kscarfone,
teoli,
Sheppy,
FredB,
ethertank,
brianloveswords,
kuvik3,
Marsf,
Jürgen Jeka
Last updated by:
ddbeck,