coderef

Gap decorationsLimited availability

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.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–148Not supported
149+Supportedsince Jun 2, 2026
Current: 155
Edge
12–148Not supported
149+Supportedsince Jun 4, 2026
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
✕Not supportedup to 27
Current: 27
MobileChrome Android
18–148Not supported
149+Supportedsince Jun 2, 2026
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
✕Not supportedup to 27
Current: 27

How to use

Not supported in Firefox, Safari, Firefox Android, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: column-rule-break.

Feature detection

CSS · check before using
@supports (column-rule-break: initial) {
  /* styles that rely on column-rule-break */
}

/* or in JavaScript */
if (CSS.supports("column-rule-break", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (144). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
column-rule-break149149✕✕149✕✕
column-rule-break.intersection149149✕✕149✕✕
column-rule-break.none149149✕✕149✕✕
column-rule-break.normal149149✕✕149✕✕
column-rule-inset149149✕✕149✕✕
column-rule-inset-cap149149✕✕149✕✕
column-rule-inset-cap-end149149✕✕149✕✕
column-rule-inset-cap-end.overlap-join149149✕✕149✕✕
column-rule-inset-cap-start149149✕✕149✕✕
column-rule-inset-cap-start.overlap-join149149✕✕149✕✕
column-rule-inset-cap.overlap-join149149✕✕149✕✕
column-rule-inset-end149149✕✕149✕✕
column-rule-inset-end.overlap-join149149✕✕149✕✕
column-rule-inset-junction149149✕✕149✕✕
column-rule-inset-junction-end149149✕✕149✕✕
column-rule-inset-junction-end.overlap-join149149✕✕149✕✕
column-rule-inset-junction-start149149✕✕149✕✕
column-rule-inset-junction-start.overlap-join149149✕✕149✕✕
column-rule-inset-junction.overlap-join149149✕✕149✕✕
column-rule-inset-start149149✕✕149✕✕
Show 124 more
Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
column-rule-inset-start.overlap-join149149✕✕149✕✕
column-rule-inset.overlap-join149149✕✕149✕✕
column-rule-visibility-items149149✕✕149✕✕
column-rule-visibility-items.all149149✕✕149✕✕
column-rule-visibility-items.around149149✕✕149✕✕
column-rule-visibility-items.between149149✕✕149✕✕
column-rule-visibility-items.normal149149✕✕149✕✕
row-rule149149✕✕149✕✕
row-rule-break149149✕✕149✕✕
row-rule-break.intersection149149✕✕149✕✕
row-rule-break.none149149✕✕149✕✕
row-rule-break.normal149149✕✕149✕✕
row-rule-color149149✕✕149✕✕
row-rule-color.currentColor149149✕✕149✕✕
row-rule-color.transparent149149✕✕149✕✕
row-rule-inset149149✕✕149✕✕
row-rule-inset-cap149149✕✕149✕✕
row-rule-inset-cap-end149149✕✕149✕✕
row-rule-inset-cap-end.overlap-join149149✕✕149✕✕
row-rule-inset-cap-start149149✕✕149✕✕
row-rule-inset-cap-start.overlap-join149149✕✕149✕✕
row-rule-inset-cap.overlap-join149149✕✕149✕✕
row-rule-inset-end149149✕✕149✕✕
row-rule-inset-end.overlap-join149149✕✕149✕✕
row-rule-inset-junction149149✕✕149✕✕
row-rule-inset-junction-end149149✕✕149✕✕
row-rule-inset-junction-end.overlap-join149149✕✕149✕✕
row-rule-inset-junction-start149149✕✕149✕✕
row-rule-inset-junction-start.overlap-join149149✕✕149✕✕
row-rule-inset-junction.overlap-join149149✕✕149✕✕
row-rule-inset-start149149✕✕149✕✕
row-rule-inset-start.overlap-join149149✕✕149✕✕
row-rule-inset.overlap-join149149✕✕149✕✕
row-rule-style149149✕✕149✕✕
row-rule-style.dashed149149✕✕149✕✕
row-rule-style.dotted149149✕✕149✕✕
row-rule-style.double149149✕✕149✕✕
row-rule-style.groove149149✕✕149✕✕
row-rule-style.hidden149149✕✕149✕✕
row-rule-style.inset149149✕✕149✕✕
row-rule-style.none149149✕✕149✕✕
row-rule-style.outset149149✕✕149✕✕
row-rule-style.ridge149149✕✕149✕✕
row-rule-style.solid149149✕✕149✕✕
row-rule-visibility-items149149✕✕149✕✕
row-rule-visibility-items.all149149✕✕149✕✕
row-rule-visibility-items.around149149✕✕149✕✕
row-rule-visibility-items.between149149✕✕149✕✕
row-rule-visibility-items.normal149149✕✕149✕✕
row-rule-width149149✕✕149✕✕
row-rule-width.medium149149✕✕149✕✕
row-rule-width.thick149149✕✕149✕✕
row-rule-width.thin149149✕✕149✕✕
row-rule.currentColor149149✕✕149✕✕
row-rule.dashed149149✕✕149✕✕
row-rule.dotted149149✕✕149✕✕
row-rule.double149149✕✕149✕✕
row-rule.groove149149✕✕149✕✕
row-rule.hidden149149✕✕149✕✕
row-rule.inset149149✕✕149✕✕
row-rule.medium149149✕✕149✕✕
row-rule.none149149✕✕149✕✕
row-rule.outset149149✕✕149✕✕
row-rule.ridge149149✕✕149✕✕
row-rule.solid149149✕✕149✕✕
row-rule.thick149149✕✕149✕✕
row-rule.thin149149✕✕149✕✕
row-rule.transparent149149✕✕149✕✕
rule149149✕✕149✕✕
rule-break149149✕✕149✕✕
rule-break.intersection149149✕✕149✕✕
rule-break.none149149✕✕149✕✕
rule-break.normal149149✕✕149✕✕
rule-color149149✕✕149✕✕
rule-color.currentColor149149✕✕149✕✕
rule-color.transparent149149✕✕149✕✕
rule-inset149149✕✕149✕✕
rule-inset-cap149149✕✕149✕✕
rule-inset-cap.overlap-join149149✕✕149✕✕
rule-inset-end149149✕✕149✕✕
rule-inset-end.overlap-join149149✕✕149✕✕
rule-inset-junction149149✕✕149✕✕
rule-inset-junction.overlap-join149149✕✕149✕✕
rule-inset-start149149✕✕149✕✕
rule-inset-start.overlap-join149149✕✕149✕✕
rule-inset.overlap-join149149✕✕149✕✕
rule-overlap149149✕✕149✕✕
rule-overlap.column-over-row149149✕✕149✕✕
rule-overlap.row-over-column149149✕✕149✕✕
rule-style149149✕✕149✕✕
rule-style.dashed149149✕✕149✕✕
rule-style.dotted149149✕✕149✕✕
rule-style.double149149✕✕149✕✕
rule-style.groove149149✕✕149✕✕
rule-style.hidden149149✕✕149✕✕
rule-style.inset149149✕✕149✕✕
rule-style.none149149✕✕149✕✕
rule-style.outset149149✕✕149✕✕
rule-style.ridge149149✕✕149✕✕
rule-style.solid149149✕✕149✕✕
rule-visibility-items149149✕✕149✕✕
rule-visibility-items.all149149✕✕149✕✕
rule-visibility-items.around149149✕✕149✕✕
rule-visibility-items.between149149✕✕149✕✕
rule-visibility-items.normal149149✕✕149✕✕
rule-width149149✕✕149✕✕
rule-width.medium149149✕✕149✕✕
rule-width.thick149149✕✕149✕✕
rule-width.thin149149✕✕149✕✕
rule.currentColor149149✕✕149✕✕
rule.dashed149149✕✕149✕✕
rule.dotted149149✕✕149✕✕
rule.double149149✕✕149✕✕
rule.groove149149✕✕149✕✕
rule.hidden149149✕✕149✕✕
rule.inset149149✕✕149✕✕
rule.medium149149✕✕149✕✕
rule.none149149✕✕149✕✕
rule.outset149149✕✕149✕✕
rule.ridge149149✕✕149✕✕
rule.solid149149✕✕149✕✕
rule.thick149149✕✕149✕✕
rule.thin149149✕✕149✕✕
rule.transparent149149✕✕149✕✕