The column-rule-style property sets the line style of the divider between columns in a multi-column layout. It is the style longhand of the column-rule shorthand.
The initial value is none, so no rule appears until you choose a visible style such as solid or dashed. Pair it with column-rule-width, column-rule-color, and column-gap. It uses the same keywords as border-style and is not inherited.
Standard-track.
Single-value column-rule-style has been widely available since 2017. Comma-separated lists and repeat() for different gutter styles are newer gap-decoration features with limited support—prefer one style for production.
Width and color stay fixed. Change only the rule style.
Scaffold uses a blue rule. double and groove bump width to 6px so the pattern is clearer.
Result
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
column-rule-style: solid
Code
CSS Examples
Each snippet keeps only what column-rule-style needs. Use Try It Yourself for a live editor.
Example 1 — solid
Draw a continuous divider between three text columns.
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
How It Works
Create columns.column-count: 3 builds a multicol box.
Leave a gutter.column-gap gives the rule space to sit in.
Style makes it visible.column-rule-style: solid turns on a continuous line.
Width and color. They paint the line; without a visible style they do nothing alone.
Example 2 — dashed
Use a softer dashed divider. Only the style keyword changes.
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
How It Works
Same scaffold. Columns, gap, width, and color stay the same.
Change one keyword.dashed replaces solid.
Longhand benefit. You update the pattern without rewriting width or color.
Try dotted next. Swap in dotted the same way for a lighter look.
Example 3 — double
Two parallel lines. Give the rule enough width so both show.
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
How It Works
Pick double. The browser draws two parallel strokes.
Widen the rule.6px leaves room for both lines; 1px often looks like one.
Keep color. Both strokes use the same column-rule-color.
Same idea for groove. 3D styles also read better with a thicker width.
Edge Cases & Pitfalls
If the divider is missing, check style first—not color.
none
Initial style is invisible
The default is none. Setting only width or color does not draw a line. Include a visible style keyword.
double
double needs enough width
Two lines need space. Use something like 6px; a 1px double often looks like a single stroke.
short
Shorthand can reset style
Writing column-rule after a longhand resets width, style, and color together. Put column-rule-style after the shorthand when you need a style override.
hidden
none vs hidden
Both hide the rule visually for column rules. Prefer none unless you specifically need hidden for border-like semantics.
list
Multiple styles are not Baseline yet
Comma-separated styles and repeat() come from newer gap-decoration specs. Stick to one style for reliable support.
Compatibility
Browser Support
column-rule-style is a browser layout property. Node.js, Deno, and Bun do not apply it.
