The column-rule-style property controls how the divider line between columns looks — solid, dashed, dotted, and more.
Line appearance.
Part of column-rule.
No line by default.
Same keyword values.
Needs width + gap.
Separate columns clearly.
The column-rule-style CSS property specifies the style of the rule (line) between columns in a multi-column layout. It lets you define how the dividing line should appear, with options such as solid, dotted, dashed, and more.
Using this property enhances the visual separation of content in a multi-column layout. Apply it to an element that already uses column-count or column-width, along with column-gap and typically column-rule-width.
The default is none, so no divider shows until you set a style like solid and give the rule a width. It uses the same keywords as border-style.
The syntax for column-rule-style is applied to a multi-column container:
selector {
column-rule-style: style;
}.columns {
column-count: 3;
column-gap: 20px;
column-rule-style: solid;
column-rule-width: 2px;
column-rule-color: black;
}Here, style can be any valid border-style value such as none, solid, dotted, dashed, double, groove, ridge, inset, or outset.
none — no rule line is displayed by default.border-style.column-rule-width and column-gap for a visible divider.column-rule shorthand: column-rule: 2px solid black;.groove, ridge, inset, outset) need sufficient width to appear clearly.| Question | Answer |
|---|---|
| Initial value | none |
| Applies to | Multi-column containers |
| Inherited | No |
| Animatable | No |
| Common use | Solid or dashed dividers between text columns |
The column-rule-style property accepts standard border-style keywords.
| Value | Description |
|---|---|
none | No rule is displayed between columns. |
solid | Displays a solid, single line between columns. |
dotted | Displays a dotted line between columns. |
dashed | Displays a dashed line between columns. |
double | Displays a double line between columns. |
groove | Displays a 3D grooved line between columns. |
ridge | Displays a 3D ridged line between columns. |
inset | Displays a 3D inset line between columns. |
outset | Displays a 3D outset line between columns. |
| Property | Controls |
|---|---|
column-rule-width | Thickness of the divider line |
column-rule-style | Line style (this property) |
column-rule-color | Line color |
column-rule | Shorthand for all three |
Each mini layout uses a 2px black rule with a different column-rule-style — solid, dashed, and dotted.
Try solid, dashed, dotted, and double column rule styles on multi-column layouts.
Start with the reference example — a solid black column rule on a three-column layout.
Set a solid rule style between three columns with 2px width and black color.
<style>
.columns {
column-count: 3;
column-gap: 20px;
column-rule-style: solid;
column-rule-width: 2px;
column-rule-color: black;
}
</style>
<div class="columns">...</div>column-rule-style: solid draws a continuous line in each column gap when width and gap are set.
Use a dashed style for a lighter, less formal column separator.
.dashed-columns {
column-count: 2;
column-gap: 2rem;
column-rule-style: dashed;
column-rule-width: 1px;
column-rule-color: #64748b;
}Dashed rules break the line into segments, which can feel softer than a solid divider.
Explore dotted and double styles for more distinctive column separators.
Create a subtle dotted line between columns.
.dotted-columns {
column-count: 3;
column-gap: 1.5rem;
column-rule-style: dotted;
column-rule-width: 2px;
column-rule-color: #94a3b8;
}Dotted rules use small round dots along the gap — useful for a minimal, magazine-style look.
Use a double line for a stronger, decorative column separator.
.double-columns {
column-count: 2;
column-gap: 2.5rem;
column-rule-style: double;
column-rule-width: 4px;
column-rule-color: #1e293b;
}Double style needs enough width (typically 3px or more) so both lines render clearly in the gap.
column-rule-style WorksSet column-count and column-gap on the container.
Choose a keyword like solid, dashed, or none.
With width and gap set, the divider appears in each column gap using your style.
Content columns are visually separated with your chosen line style.
The column-rule-style property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera.
All major browsers support column-rule-style as part of the Multi-column Layout module.
Bottom line: Use column-rule-style freely for multi-column dividers. Test 3D styles (groove, ridge) if you rely on them for design.
The column-rule-style property is a useful tool for enhancing the appearance of multi-column layouts. By customizing the style of the rule between columns, you can create visually appealing and well-organized content.
Experiment with different styles to find the one that best suits your design needs.
solid or dashed for clean, readable dividerscolumn-rule-width and column-gap alongside stylenone (the default)double with very thin widths — it may not rendercolumn-rule-styleUse these points when styling column divider lines.
Line appearance.
PurposeNo line by default.
DefaultSame keywords.
ValuesWidth + gap too.
TipPart of column-rule.
SyntaxOpen the HTML editor, set column-rule-style: solid with width and color, and preview styled column dividers.
5 people found this page helpful