Take your JavaScript to the next level at Frontend Masters.
To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you’ve ever styled border, then you are ready to style column-rule.
.container {
-webkit-columns: 2 400px;
-moz-columns: 2 400px;
columns: 2 400px;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}The property is shorthand for column-rule-width, column-rule-style, and column-rule-color, which is the same pattern as border and accepts the same values.
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-color: black;
-moz-column-rule-color: black;
column-rule-color: black;column-rule-width can be a length like 3px or a keyword value like thin.
column-rule-style can be any of the border-style values like solid, dotted, and dashed.
column-rule-color can be any color value.
Unlike column-gap, column-rule doesn’t take up space. If the column-rule-width is thicker than the column-gap then the rule will expand underneath the columns.
The vertical rule will only exist between columns that have content.
Related Properties
Additional Resources
Browser Support
Multi-column layout support:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Don’t forget your prefixes!
