Repository navigation
CSS Gap Decorations #1102
Description
Description
CSS Gap Decorations enables styling of gaps in container layouts like Grid and Flexbox, similar to ‘column-rule’ in multicol layout.
See also #193.
Specification
https://drafts.csswg.org/css-gaps-1/
web-feature
https://web-platform-dx.github.io/web-features-explorer/features/gap-decorations/
Test Links
https://wpt.fyi/results/css/css-gaps/
Additional Signals
Microsoft has an experimental implementation in Edge and @kbabbitt is pushing the spec. forward.
Chromium: implementation bug
Mozilla: positive, implementation bug
Apple: no signal, though implementation bug
Mozilla also had an experimental implementation of gap decorations and an outdated draft spec. from @MatsPalmgren.
This feature is highly requested by web authors who must use hacks to style the gaps in Grid and Flexbox layouts today.
Resources
- Blog post on Chrome Developers
- Blog post on CSS-Tricks
- Blog post on Frontend Masters
- Blog post on Windows Blogs
- Blog post on Plain English
- Demo showcasing Microsoft's experimental implementation
Suggested hacks
- https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/#how-do-i-add-backgrounds-and-borders-to-grid-areas
- https://x.com/geddski/status/1004731709764534274
Activity
github-actions commentedon Sep 19, 2025
This comment was automatically generated based on the information you provided. Please don't edit it.
Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include
web-features: <feature-id>.To find feature IDs, use the web-features explorer.
Feature Gap decorations
column-ruleandrow-ruleCSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. Therule-break,rule-outset, andrule-paint-orderproperties control the appearance of these lines.wpt-interop commentedon Feb 12, 2026
Thank you for proposing CSS Gap Decorations for Interop 2026.
We want to let you know it was not selected to be part of Interop this year.
On behalf of the entire Interop team, thank you for submitting it for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.
Posted on behalf of the Interop team.