Column-Rule Property
Last updated: 2026-09-13
column-rule Column-Rule Property
The column-rule property is the shorthand for column-rule-width, column-rule-style, and column-rule-color, drawing a rule between columns in a multi-column layout. Similar to border, it renders only within the column gap, enhancing the visual separation of multi-column text.
| Category | |
|---|---|
| Initial Value | medium none currentcolor |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<column-rule-width> || <column-rule-style> || <column-rule-color> | Value | Shorthand for the column rule. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-rule | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： column-rule's syntax mirrors border; the three values can be in any order, but style must be specified for the rule to render.
Warning： column-rule only shows in multi-column layouts; with a single column, no rule appears. The rule's width does not consume column width; it is drawn in the middle of the gap.
❓ FAQ
QWhat's the difference between column-rule and border?
Aborder is drawn around an element's four edges, enclosing the whole box; column-rule is drawn only in the gaps between columns to separate adjacent columns and never appears at the outermost edges. Also, column-rule takes no extra space, since it is painted inside the gap area, so its width does not squeeze the columns. Its syntax mirrors border, with width, style, and color.
QHow do I make the rule dashed?
ASet column-rule-style to dashed or dotted, for example column-rule: 2px dashed #999. The style accepts all the line types border supports, such as solid, dashed, dotted, and double. Remember that style must be specified; it defaults to none, and without it no rule renders at all, no matter what width or color you provide. For a subtle look, a 1px solid rule in a light gray is usually enough.
QHow do the three column-rule sub-properties work?
AThe column-rule shorthand covers three sub-properties: width, for example 1px; style, for example solid or dashed, which is required for the rule to render; and color, which defaults to currentcolor. The three values can be written in any order, so column-rule: #ccc 1px solid is equally valid. Any unset sub-property falls back to its initial value, as with border, so an incomplete declaration still renders a usable rule.
QWhy isn't the column-rule showing?
ACommon reasons: first, column-rule-style is not set, and the default none renders no line; second, the container is not actually multi-column, because with one column there is no gap to draw in, so confirm the content is long enough and column-count or column-width took effect; third, the rule sits within the gap, so column-gap:0 makes it invisible. Check these three in order.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
column-gap
Set the distance between columns.
border (Border Property)
The border property with syntax similar to column-rule.
