Avatar of Katy DeCorah
Katy DeCorah on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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!