CSS column-rule-style Property

CSS column-rule-style Property

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

1. Syntax

selector {
  column-rule-style: value;
}

Value	Description
none	No rule (default).
solid	A single solid line.
dashed	A dashed line.
dotted	A dotted line.
double	Two solid lines.
groove	A 3D grooved effect.
ridge	A 3D ridged effect.
inset	A 3D inset effect.
outset	A 3D outset effect.

✅ Must be used  column-rule-width to be visible.

2. Example – Setting Column Rule Style

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

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

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

3. Example – Using column-rule Shorthand

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

✅ Equivalent to:

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

4. Best Practices

✔ Always pair column-rule-style with column-rule-width for visibility.
✔ Use column-rule shorthand for cleaner code.
✔ Choose subtle styles (solid, dashed) for better readability.