CSS column-rule-width Property

CSS column-rule-width Property

The column-rule-width property in CSS sets the width (thickness) of the vertical rule (divider) between columns in a multi-column layout. It works together with column-rule-style and column-rule-color to define the column separator.

1. Syntax

selector {
  column-rule-width: value;
}

Value	Description
thin	A thin column rule.
medium (default)	A medium column rule.
thick	A thick column rule.
<length>	Custom thickness (e.g., 2px, 5px).

✅ Use column-rule shorthand to set width, style, and color in one line.

2. Example – Setting Column Rule Width

.columns {
  column-count: 3;
  column-rule-width: 3px;
  column-rule-style: solid;
  column-rule-color: black;
}

<div class="columns">
  <p>This is a multi-column layout with a 3px wide rule.</p>
  <p>More text continues in different columns.</p>
</div>

✅ Adds a 3px solid black vertical rule between columns.

3. Example – Using column-rule Shorthand

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

✅ Equivalent to:

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

4. Best Practices

✔ Always combine column-rule-width with column-rule-style for visibility.
✔ Use column-rule shorthand for cleaner code.
✔ Keep column-rule-width subtle to avoid cluttered layouts.