In multi-column layouts, the column-rule
CSS property specifies a straight line, or "rule", to be drawn between each column.
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;
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 |
Syntax
One, two, or three of the values listed below, in any order:
Values
<'column-rule-width'>
- Is a
<length>
or one of the three keywords,thin
,medium
, orthick
. Seeborder-width
for details. <'column-rule-style'>
- See
border-style
for possible values and details. <'column-rule-color'>
- Is a
<color>
value.
Formal syntax
<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
Examples
Example 1
/* 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; }
Example 2
HTML content
<div id="col_rul"> <p> column one </p> <p> column two </p> <p> column three </p> </div>
CSS content
#col_rul { padding: 0.3em; background: gold; border: groove 2px gold; column-rule: inset 2px gold; column-count: 3; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-rule' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 50.0[1] |
(Yes)-webkit | 3.5 (1.9.1)-moz 52.0 (52.0)[2] |
10 | 11.10 | 3.0 (522)-webkit |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | ? | ? 50.0[1] |
(Yes)-webkit | (Yes) 52.0 (52.0)[2] |
? | ? | ? | ? 50.0[1] |
[1] Unprefixed as of Chrome 50.
[2] Unprefixed as of Gecko 52, with prefixed aliases still available.
Document Tags and Contributors
Tags:
Contributors to this page:
wbamberg,
chrisdavidmills,
Sheppy,
erikadoyle,
Sebastianz,
fscholz,
jpmedley,
Prinz_Rana,
duncanmcdonald,
jigs12,
teoli,
jsx,
kscarfone,
ethertank,
FredB,
brianloveswords,
kuvik3,
Marsf,
Jürgen Jeka,
Mvent2
Last updated by:
wbamberg,