mdn / mdn/content

CSS gap decorations

Open
#44,435 2 comments 1 reaction 1 assignee Claimed by @estelle View on GitHub
Content:CSS
Dominant language
Markdown
Stars
11k
Forks
23.2k
Avg merge
2d 9h
Merged PRs (30d)
331

Description

### Proposal

CSS gap decoration is shipping in chromium-based browsers starting with Edge and Chrome 149. See https://learn.microsoft.com/en-us/microsoft-edge/web-platform/release-notes/149#css-gap-decorations and https://developer.chrome.com/blog/new-in-chrome-149?hl=en#gap-decorations.

We should document the new properties and values.

### Browser support

Edge and Chrome 149, and other Chromium browsers with matching versions.

### Tasks

Write the docs

### Dependencies

This depends on the column-rule property docs. CSS Gap Decorations extends this with the new row-rule property (and rule shorthand), but also adds a bunch of other rule-related properties to control insets, and breaks, etc.

### Additional information

Blogs:

* https://css-tricks.com/the-gap-strikes-back-now-stylable/
* https://developer.chrome.com/blog/gap-decorations
* https://blogs.windows.com/msedgedev/2025/03/19/minding-the-gaps-a-new-way-to-draw-separators-in-css/

Release notes:

* https://learn.microsoft.com/en-us/microsoft-edge/web-platform/release-notes/149#css-gap-decorations
* https://developer.chrome.com/blog/new-in-chrome-149?hl=en#gap-decorations

Demos:

* https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations

### Are you willing to support this work?

Fixes https://github.com/mdn/mdn/issues/837
is fixed by https://github.com/openwebdocs/project/issues/238

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.