For a long time now, web developers have had to use border and pseudo-element hacks to style the gaps between the items of layouts like grid and flexbox. Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of control.
Our Edge web platform team at Microsoft led both the design and standardization of the feature, and the implementation is rolling out across all Chromium-based browsers. For background, check out an early preview of gap decorations by my colleague Patrick, and a full deep dive about the stable release by my colleague Javier.
In this article, I want to share what has changed in the feature since then.
Catching up on gap decorations
Gap decorations extend the familiar column-rule CSS property, which already works in multi-column layout, and makes it work in grid and flexbox layouts too. In addition, there’s also now support for the row-rule property, so that decorations can be displayed in both axes. And finally, the syntax is extended to provide a lot more control of the decorations.
Patrick already gave a good walkthrough of the feature but, since then, a few things have changed such as property renames to make things clearer, and new properties, informed by the feedback we’ve received from web developers during early testing.
Here is a summary of the changes:
| Old | New | What this change means |
| row-rule-outset``column-rule-outset | row-rule-inset``column-rule-inset | “Outset” became “inset” and setting these properties now insets the rules inward from the decorations edges. |
| No fine grain control of where row-rule-insetandcolumn-rule-insetapply | New longhand properties: row-rule-inset-cap``row-rule-inset-junction``row-rule-inset-startrow-rule-inset-endand column-rule-inset-cap``column-rule-inset-junction``column-rule-inset-startcolumn-rule-inset-endfor fine-grain control. | You can now inset the outer ends (caps) and the intersections (junctions) independently. You can also inset the start and end of decorations independently. |
| gap-rule-paint-order | rule-overlap | This property was renamed for clarity. It controls how decorations layer where row and column rules cross. |
| N/A | rule-visibility-items | This new property controls whether rules show next to empty areas in a container. |
Browser support
Gap decorations are available in Chrome and Edge starting with version 149, and other Chromium-based browsers that match those versions.
Other browser engines have been receptive and engaged in standards venues, so over time, this feature will become interoperable.
If you’d like to use it now, I’d say:
- If you consider these decorations to be a progressive enhancement, then great! Just start using the feature today, and nothing will break on browsers that don’t support it.
- If you absolutely need gap decorations, a polyfill is in development for browsers that don’t yet have support.
Using gap decorations
Alright, enough prose, let’s expand on the demo which Patrick used in his article. We’re going to add new sections and use the latest features of gap decorations along the way.
Let’s start with some minimal HTML markup:
```
My personal site
...