The column-rule
property is used to draw a rule, kind of like a border, between adjacent columns in a multi-column layout.
It is a shorthand property used to set the longhand column rule properties.
A column rule can be styled, colored, and have a specified width. This can be done using the longhand properties: column-rule-width
, column-rule-style
, and column-rule-color
.
A column rule is drawn only between adjacent columns; that is, it is not drawn before the first column, nor is it drawn after the last column.
A column rule does not take up any space. This means that adding a column rule will not increase the amount of space, or the gap (see column-gap
), between the columns.
Official Syntax
-
Syntax:
column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
- Initial: 0 solid currentColor; which is the concatenation of the initial values of each of the longhand properties
- Applies To: multi-column elements
-
Animatable: the
column-rule-width
property is animatable as a length, and thecolumn-rule-color
property is animatable as a color
Values
- <‘column-rule-width’> || <‘column-rule-style’> || <‘column-rule-color’>
-
See the
column-rule-width
,column-rule-style
, andcolumn-rule-color
entries for more information on possible values for each property.
Notes
Omitted values are set to their initial values. That is, if you only specify values for one or two properties in the shorthand column-rule
property, the property or properties whose values are not specified are set to their initial values.
Examples
The following rule:
column-rule: 1em dotted #ddd;
is equivalent to:
column-rule-width: 1em; column-rule-style: dotted; column-rule-color: #ddd;
The following draws a green dashed rule between adjacent columns in a multi-column element:
.el { columns: 12em 3; column-rule: 2px dashed #009966; }
The following example applies a column rule which spans across and fills the entire space between adjacent columns, because the width of the rule is equal to the width of the column-gap
:
.mag { column-width: 25%; column-rule: 20px solid gray; column-gap: 20px; }
Live Demo
Play with the values of the column-rule
property and the column-gap
properties to see how the rules between the columns are drawn.
Browser Support
CSS3 Multiple column layout
Method of flowing information in multiple columns
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 50
- 92
- 10
- 37
- 10
Mobile / Tablet
- 10
- 131
- all
- 131
- 132