column-rule

Avatar of Katy DeCorah
Katy DeCorah on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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!