CSS column-rule Property

CSS column-rule Property

The column-rule property in CSS is a shorthand property used to set the width, style, and color of the vertical rule (divider) between columns in a multi-column layout. It combines the functionality of column-rule-width, column-rule-style, and column-rule-color into a single property.

1. Syntax

selector {
  column-rule: width style color;
}

Value	Description
width	The width (thickness) of the column rule (e.g., 3px).
style	The style of the column rule (e.g., solid, dashed).
color	The color of the column rule (e.g., black, red).

2. Example – Basic Usage of column-rule

.columns {
  column-count: 3;
  column-rule: 3px dashed blue;
}

<div class="columns">
  <p>This is a multi-column layout.</p>
  <p>More text flows into multiple columns.</p>
</div>

✅ Adds a 3px dashed blue rule between the columns.

3. Example – Using column-rule with column-count

.columns {
  column-count: 4;
  column-rule: 4px solid black;
}

<div class="columns">
  <p>Text inside a 4-column layout with a black solid rule.</p>
</div>

✅ Displays a 4px solid black divider between the columns.

4. Example – Full Shorthand with column-rule

.columns {
  column-count: 2;
  column-rule: 5px dotted red;
}

✅ Equivalent to:

column-rule-width: 5px;
column-rule-style: dotted;
column-rule-color: red;

5. Best Practices

✔ Use column-rule for compact code.
✔ Always pair with column-count or column-width for a multi-column layout.
✔ Make sure the rule is subtle (avoid too thick or distracting lines).