Repository navigation
Gap decorations #362
Description
This GitHub issue is for collecting web developer signals for 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.
Browser support
- Chrome 149 (Jun 2, 2026)
- Chrome Android 149 (Jun 2, 2026)
- Edge 149 (Jun 4, 2026)
- Firefox: not supported
- Firefox for Android: not supported
- Safari: not supported
- Safari on iOS: not supported
Give us feedback
If you're pressed for time, but you want this feature to be available in all browsers, please give this issue a thumbs up 👍 reaction.
However, a much better guide for us is to know how you'd use this feature, and what you're having to do in the meantime. This helps us judge the priority versus other features.
Copy the template below in a comment, and add the details that matter to you.
## What I want to do with this feature
<!-- Add your specific use-cases, even if they seem obvious to you. -->
## What I'm having to do in the meantime
<!--
Are you having to use another feature instead, a polyfill, or is it blocking you completely?
Why are the alternatives worse than using this feature?
-->All comments are expected to adhere to the Code of Conduct.
Learn more
You can learn more about this feature here:
Activity
scardusty commentedon Oct 20, 2026
What I want to do with this feature
Immediately I think of
gridandtableinner borders.border-radius(since they cannot haveborder-collapse: collapsed).What I'm having to do in the meantime
For grids and tables, I have been using a background color on the parent, in combo with differently colored cells/child elements to simulate a gap-decoration kind of thing.
The problem: If there's not a perfect number of child elements to fill the grid/table, the leftover space has the parent
background. A blank area exposing the background workaround. The other thing I could do (possibly? if the stars are aligned) is manually assign borders to sides of the child elements with lots of:last-childetc. and content-dependent conditions, or something with pseudo elements. I think everyone hates doing that, and it's not reasonable on a large scale.I read about
ruleon mdn docs and it's the most excited I've been about a new CSS feature in awhile. It would be a great solution.Ideally, the
rulewould not continue through the empty space.I think it's a great idea and I have no complaints about the syntax. I like the
repeat()function involvement.But yeah, when styling what is essentially a rule or gap, it would be great to be able to target it instead of using a background hack.