demo · v139
Gap Decorations Spec Playground
Every core knob from the CSS Gap Decorations spec, wired up at once: row-rule and column-rule, rule-break, rule-inset, rule-overlap, rule-visibility-items, and the repeat() patterning syntax. Toggle one and read the generated CSS.
why this exists
Before gap decorations, authors simulated separators with child borders or pseudo-elements. Those workarounds double up at shared edges, need first/last-child cleanup, and can affect the box model. These controls keep the decoration on the container so layout stays stable while the visible rules change.
gap
20px
20px
column-rule
2px
row-rule
0px
repeat() patterning
0px
1
2
3
4
5
6
7
8
9