column-rule-color 3i4br
The column-rule-color property is used to set the color of the multi-column layout. 4a4m5j
A column rule is kind of like a border that you can add to separate adjacent columns in the same multi-column layout. It can even have styles like those a border can have.
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 column-gap
), between the columns.
Official Syntax 4j1l4a
- Syntax:
column-rule-color: <color>
- Initial:
currentColor
- Applies To: multi-column elements
- Animatable: yes, as a color
Values 4w6m73
- <color>
-
See the
<color>
entry for a list of possible colors.
Examples 3y6d6i
The following will apply a blue color to rules drawn between adjacent columns in a multi-column layout:
.mag { columns: 12em; column-rule-width: 5px; column-rule-style: solid; column-rule-color: #0098D8; }
See the live demo section next for a live example.
Browser s162l
CSS3 Multiple column layout 1x2y3u
Method of flowing information in multiple columns
W3C Candidate Recommendation
ed from the following versions:
Desktop 1i5h4c
- 50
- 52
- 10
- 11
- 10
Mobile / Tablet 1u2r2g
- 10
- 66
- all
- 66
- 60