column-rule

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

• columns
• column-count
• column-fill
• column-gap
• column-span
• column-width

Additional Resources

• MDN Docs
• CSS3 Spec
• Can I Use

Browser Support

Multi-column layout support:

Don’t forget your prefixes!