v150 · CSS · Backgrounds
Multi-layer Composition
See the old two-layer background trick and the new border-area approach produce identical gradient borders — then adjust border width, border radius, and gradient to see where the two approaches diverge.
Border width
6px
Border radius
12px
Gradient
Checking @supports (background-clip: border-area)…
Old two-layer hack
Old approach
New border-area (Chrome 150)
New approach
Old two-layer hack
/* loading… */New border-area (Chrome 150)
/* loading… */see also
- border-area vs border-image — what each approach can and can't do
- Gradient Border Gallery — live playground
- Animated Border Card — conic gradient + @property
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗