Limited Availability
Grid
Gap decorations
The
column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. The rule-break, rule-outset, and rule-paint-order properties control the appearance of these lines.
Baseline Status:
This feature is currently Limited (not yet Baseline). Latest engine implementation shipped on Jun 4, 2026.
Desktop Browser Engine Support
Google Chrome
149
Supported
Mozilla Firefox
—
Unsupported
Apple Safari
—
Unsupported
Microsoft Edge
149
Supported
Mobile Browser Engine Support
Chrome Android
149
Firefox Android
—
Safari iOS
—
Specifications and References
MDN Browser Compat Data Keys:
css.properties.column-rule-break ↗
css.properties.column-rule-break.intersection ↗
css.properties.column-rule-break.none ↗
css.properties.column-rule-break.normal ↗
css.properties.column-rule-inset ↗
css.properties.column-rule-inset-cap ↗
css.properties.column-rule-inset-cap-end ↗
css.properties.column-rule-inset-cap-end.overlap-join ↗
css.properties.column-rule-inset-cap-start ↗
css.properties.column-rule-inset-cap-start.overlap-join ↗
css.properties.column-rule-inset-cap.overlap-join ↗
css.properties.column-rule-inset-end ↗
css.properties.column-rule-inset-end.overlap-join ↗
css.properties.column-rule-inset-junction ↗
css.properties.column-rule-inset-junction-end ↗
css.properties.column-rule-inset-junction-end.overlap-join ↗
css.properties.column-rule-inset-junction-start ↗
css.properties.column-rule-inset-junction-start.overlap-join ↗
css.properties.column-rule-inset-junction.overlap-join ↗
css.properties.column-rule-inset-start ↗
css.properties.column-rule-inset-start.overlap-join ↗
css.properties.column-rule-inset.overlap-join ↗
css.properties.column-rule-visibility-items ↗
css.properties.column-rule-visibility-items.all ↗
css.properties.column-rule-visibility-items.around ↗
css.properties.column-rule-visibility-items.between ↗
css.properties.column-rule-visibility-items.normal ↗
css.properties.row-rule ↗
css.properties.row-rule-break ↗
css.properties.row-rule-break.intersection ↗
css.properties.row-rule-break.none ↗
css.properties.row-rule-break.normal ↗
css.properties.row-rule-color ↗
css.properties.row-rule-color.currentColor ↗
css.properties.row-rule-color.transparent ↗
css.properties.row-rule-inset ↗
css.properties.row-rule-inset-cap ↗
css.properties.row-rule-inset-cap-end ↗
css.properties.row-rule-inset-cap-end.overlap-join ↗
css.properties.row-rule-inset-cap-start ↗
css.properties.row-rule-inset-cap-start.overlap-join ↗
css.properties.row-rule-inset-cap.overlap-join ↗
css.properties.row-rule-inset-end ↗
css.properties.row-rule-inset-end.overlap-join ↗
css.properties.row-rule-inset-junction ↗
css.properties.row-rule-inset-junction-end ↗
css.properties.row-rule-inset-junction-end.overlap-join ↗
css.properties.row-rule-inset-junction-start ↗
css.properties.row-rule-inset-junction-start.overlap-join ↗
css.properties.row-rule-inset-junction.overlap-join ↗
css.properties.row-rule-inset-start ↗
css.properties.row-rule-inset-start.overlap-join ↗
css.properties.row-rule-inset.overlap-join ↗
css.properties.row-rule-style ↗
css.properties.row-rule-style.dashed ↗
css.properties.row-rule-style.dotted ↗
css.properties.row-rule-style.double ↗
css.properties.row-rule-style.groove ↗
css.properties.row-rule-style.hidden ↗
css.properties.row-rule-style.inset ↗
css.properties.row-rule-style.none ↗
css.properties.row-rule-style.outset ↗
css.properties.row-rule-style.ridge ↗
css.properties.row-rule-style.solid ↗
css.properties.row-rule-visibility-items ↗
css.properties.row-rule-visibility-items.all ↗
css.properties.row-rule-visibility-items.around ↗
css.properties.row-rule-visibility-items.between ↗
css.properties.row-rule-visibility-items.normal ↗
css.properties.row-rule-width ↗
css.properties.row-rule-width.medium ↗
css.properties.row-rule-width.thick ↗
css.properties.row-rule-width.thin ↗
css.properties.row-rule.currentColor ↗
css.properties.row-rule.dashed ↗
css.properties.row-rule.dotted ↗
css.properties.row-rule.double ↗
css.properties.row-rule.groove ↗
css.properties.row-rule.hidden ↗
css.properties.row-rule.inset ↗
css.properties.row-rule.medium ↗
css.properties.row-rule.none ↗
css.properties.row-rule.outset ↗
css.properties.row-rule.ridge ↗
css.properties.row-rule.solid ↗
css.properties.row-rule.thick ↗
css.properties.row-rule.thin ↗
css.properties.row-rule.transparent ↗
css.properties.rule ↗
css.properties.rule-break ↗
css.properties.rule-break.intersection ↗
css.properties.rule-break.none ↗
css.properties.rule-break.normal ↗
css.properties.rule-color ↗
css.properties.rule-color.currentColor ↗
css.properties.rule-color.transparent ↗
css.properties.rule-inset ↗
css.properties.rule-inset-cap ↗
css.properties.rule-inset-cap.overlap-join ↗
css.properties.rule-inset-end ↗
css.properties.rule-inset-end.overlap-join ↗
css.properties.rule-inset-junction ↗
css.properties.rule-inset-junction.overlap-join ↗
css.properties.rule-inset-start ↗
css.properties.rule-inset-start.overlap-join ↗
css.properties.rule-inset.overlap-join ↗
css.properties.rule-overlap ↗
css.properties.rule-overlap.column-over-row ↗
css.properties.rule-overlap.row-over-column ↗
css.properties.rule-style ↗
css.properties.rule-style.dashed ↗
css.properties.rule-style.dotted ↗
css.properties.rule-style.double ↗
css.properties.rule-style.groove ↗
css.properties.rule-style.hidden ↗
css.properties.rule-style.inset ↗
css.properties.rule-style.none ↗
css.properties.rule-style.outset ↗
css.properties.rule-style.ridge ↗
css.properties.rule-style.solid ↗
css.properties.rule-visibility-items ↗
css.properties.rule-visibility-items.all ↗
css.properties.rule-visibility-items.around ↗
css.properties.rule-visibility-items.between ↗
css.properties.rule-visibility-items.normal ↗
css.properties.rule-width ↗
css.properties.rule-width.medium ↗
css.properties.rule-width.thick ↗
css.properties.rule-width.thin ↗
css.properties.rule.currentColor ↗
css.properties.rule.dashed ↗
css.properties.rule.dotted ↗
css.properties.rule.double ↗
css.properties.rule.groove ↗
css.properties.rule.hidden ↗
css.properties.rule.inset ↗
css.properties.rule.medium ↗
css.properties.rule.none ↗
css.properties.rule.outset ↗
css.properties.rule.ridge ↗
css.properties.rule.solid ↗
css.properties.rule.thick ↗
css.properties.rule.thin ↗
css.properties.rule.transparent ↗
id: gap-decorations