The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.
| 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 | the unique non-ambiguous order defined by the formal grammar |
/* 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;
<length> or one of the thin, medium or thick keyword describing the width of the rule separating two columns.<br-width>where
<br-width> = <length> | thin | medium | thick
#header {
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 (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes)-webkit | (Yes)-webkit | 3.5 (1.9.1)-moz | 10 | 11.10 | 3.0 (522)-webkit |
| Unprefixed | 50.0 | (Yes) |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | (Yes)-webkit | (Yes) | ? | ? | ? | ? |
| Unprefixed | No support | 50.0 | (Yes) | 50.0 |
© 2005–2017 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