In multi-column layouts, the column-rule
CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-*
properties separately: column-rule-width
, column-rule-style
and column-rule-color
.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | multicol elements |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
column-rule: dotted; column-rule: solid blue; column-rule: solid 8px; column-rule: thick inset blue; /* Global values */ column-rule: inherit; column-rule: initial; column-rule: unset;
Accepts one, two or three values in any order:
<'column-rule-width'>
<length>
or one of the three keywords, thin
, medium
, or thick
. See border-width
for details.<'column-rule-style'>
border-style
for possible values and details.<'column-rule-color'>
<color>
value.<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
/* same as "medium dotted currentColor" */ p.foo { column-rule: dotted; } /* same as "medium solid blue" */ p.bar { column-rule: solid blue; } /* same as "8px solid currentColor" */ p.baz { column-rule: solid 8px; } p.abc { column-rule: thick inset blue; }
<div id="col_rul"> <p> column one </p> <p> column two </p> <p> column three </p> </div>
#col_rul { padding: 0.3em; background: gold; border: groove 2px gold; column-rule: inset 2px gold; column-count: 3; }
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-rule' 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