The column-rule property draws a line between columns in multi-column layouts — a shorthand for width, style, and color.
Divider between cols.
Width style color.
No rule by default.
Border-like styles.
Space for the rule.
Visual separation.
The column-rule CSS property defines the appearance of the rule (line) between columns in a multi-column layout. It is a shorthand for setting the width, style, and color of the divider between columns.
It helps enhance visual separation between columns, making content easier to read and more aesthetically pleasing — similar to the lines between newspaper columns.
Always set column-gap when using column-rule. The rule is drawn in the gap — without gap space, the line may not be visible.
The syntax for column-rule follows the same pattern as border:
selector {
column-rule: width style color;
}.columns {
column-count: 3;
column-gap: 20px;
column-rule: 5px solid black;
}medium none currentcolor (no visible rule).border shorthand.column-count or column-width).column-gap area.column-rule-width, column-rule-style, column-rule-color.| Question | Answer |
|---|---|
| Initial value | medium none currentcolor |
| Applies to | Multi-column containers |
| Inherited | No |
| Animatable | Partially (color and width in some browsers) |
| Common use | Magazine-style dividers between text columns |
column-rule accepts three components — width, style, and color — combined in one shorthand declaration.
Can be any length value or keyword:
thin, medium, thick1px, 5px, 0.2rem, etc.Determines the line style between columns:
none — no rule (default style component)solid, dashed, dotted, doublegroove, ridge, inset, outsetCan be any valid CSS color value — named colors, hex, rgb, hsl, or currentColor.
| Component | Example | Meaning |
|---|---|---|
| Full shorthand | column-rule: 5px solid black; | 5px solid black line between columns |
| Default | column-rule: medium none currentcolor; | No visible rule between columns |
| Dashed | column-rule: 1px dashed #94a3b8; | Light dashed divider |
The column-rule shorthand expands into three individual properties:
column-rule-width — thickness of the linecolumn-rule-style — line style (solid, dashed, etc.)column-rule-color — line colorUse longhand when you only need to change one part of the rule, such as color alone.
Both blocks use three columns with gap. The left has no rule; the right uses column-rule: 2px solid #64748b.
Try a solid black rule, dashed dividers, dotted color rules, and a subtle thin line.
Start with the reference example — a three-column layout with a 5px solid black rule.
Create a three-column layout with a solid black rule between columns.
<style>
.columns {
column-count: 3;
column-gap: 20px;
column-rule: 5px solid black;
}
</style>
<div class="columns">...</div>A 5px solid black line appears centered in the 20px gap between each column pair.
Use a dashed style for a lighter, less formal divider between columns.
.dashed-columns {
column-count: 2;
column-gap: 2rem;
column-rule: 2px dashed #94a3b8;
}The dashed style creates a broken line — softer than a solid rule for casual layouts.
Experiment with dotted lines, brand colors, and thin dividers.
Combine a dotted style with a custom color for a decorative column divider.
.brand-columns {
column-count: 3;
column-gap: 1.5rem;
column-rule: 3px dotted #7c3aed;
}Style and color work together — dotted plus a purple hex value creates a branded divider.
Use a 1px solid line in a light gray for a clean, minimal magazine layout.
.subtle {
column-count: 2;
column-gap: 2.5rem;
column-rule: 1px solid #e2e8f0;
max-width: 42rem;
}A thin, light rule provides separation without drawing too much attention away from the content.
column-rule WorksDefine columns with column-count and space with column-gap.
Set width, style, and color with column-rule shorthand.
A vertical rule appears centered in each column gap, running the full height of the container.
Readers see distinct columns with visible dividers that improve scanability.
The column-rule property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera.
All major browsers support column-rule as part of the Multi-column Layout module.
Bottom line: Use column-rule for multi-column dividers. Pair with adequate column-gap so rules render clearly.
The column-rule property is a versatile tool for adding visual distinction between columns in a multi-column layout. By adjusting the width, style, and color of the column rule, you can enhance the readability and design of your content.
Experiment with solid, dashed, and dotted styles to see how they can improve the appearance of your multi-column layouts.
column-gap alongside column-rulecolumn-gap — rules need gap space to showcolumn-rule with the element’s outer bordercolumn-ruleUse these points when styling column dividers.
Line between cols.
PurposeWidth style color.
SyntaxNo rule shown.
Defaultcolumn-gap space.
Tipsolid dashed dotted.
ValuesOpen the HTML editor, add column-rule: 5px solid black with column-count and column-gap.
5 people found this page helpful