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 property 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 | per grammar |
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
<div id="col_rul"> <p> column one </p> <p> column two </p> <p> column three </p> </div>
CSS
#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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 50 Yes -webkit- | Yes -webkit- | 52 | 10 | 11.1 15 -webkit- | 3 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | 50 Yes -webkit- | ? | 52 Yes -moz- | ? | ? | ? |
1. Before Firefox 3, the default value for the normal
keyword was 0
and not 1em
.
Document Tags and Contributors
Tags:
Contributors to this page:
ddbeck,
mfluehr,
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:
ddbeck,