Gap decorations
Limited 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.
Browser support
- Chrome 149 Released on 2026-06-02
- Chrome Android 149 Released on 2026-06-02
- Edge 149 Released on 2026-06-04
- Firefox Not supported Position: positive Bugs: 1963897
- Firefox for Android Not supported Position: positive
- Safari Not supported Position: support
- Safari on iOS Not supported Position: support
Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.
MDN documentation
Specifications
Usage (according to Chrome Platform Status)
~0.088% of page loads. More data at chromestatus.com.Web Platform Tests (WPT)
View the latest WPT test results for this featureSurveys
Developer use cases
-
Immediately I think of `grid` and `table` inner borders. - Add inner borders to tables that have `border-radius` (since they cannot have `border-collapse: collapsed`). - And grids that look like border-collapsed tables, such as a calendar's borders. - Gap color! - The potential for attractive plaid CSS.
Immediately I think of `grid` and `table` inner borders. - Add inner borders to tables that have `border-radius` (since they cannot have `border-collapse: collapsed`). - And grids that look like border-collapsed tables, such as a calendar's borders. - Gap color! - The potential for attractive plaid CSS. [see original comment]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist