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
How to read CSS 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
[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,