The column-rule-width
CSS property lets you set the width of the rule (line) 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 |
The column-rule-width
property is specified as a single <'border-width'>
value.
<'border-width'>
<length>
or one of the thin
, medium
, or thick
keywords describing the width of the rule separating two columns.<'border-width'>
article { column-rule-width: thick; }
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-rule-width' in that specification. | Candidate Recommendation | Initial definition |
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 | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | Yes |
50 Yes -webkit- |
Yes -webkit- |
50 Yes -moz- |
? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width