v150 · CSS · Backgrounds

border-area vs border-image

Both background-clip: border-area and border-image produce gradient borders — but they differ critically on border-radius, box-shadow, and composability. Here's where each wins and where each breaks.

Adjust the shared card inputs and compare how both approaches compose.

background-clip: border-area (Chrome 150)

border-area
gradient via background-clip

border-image

border-image
gradient via border-image
Scenario: border-radius
border-area
border-image
border-radius works naturally with border-area. border-image overrides and ignores border-radius — the corners stay square.
border-area ✓ border-image ✗
Scenario: box-shadow
border-area
border-image
Both work with box-shadow. The shadow follows the element box in both cases.
border-area ✓ border-image ✓
Scenario: outline
border-area
border-image
outline is painted outside the border box in both cases. Both work, though border-radius on the border-area card affects outline rendering more naturally.
border-area ✓ border-image ✓
Scenario: inherit other border props
border-area
border-image
border-area respects per-side border widths. border-image also respects them — but its slice/repeat logic can look different.
border-area ✓ border-image ✓
Capability background-clip: border-area border-image
Gradient border ✓ ✓
Works with border-radius ✓ ✗ overrides border-radius
Combine with other border-* props ✓ full composability ✗ overrides border-color, border-style
Separate content background ✓ via padding-box layer ✓ via background
Animation with @property ✓ via CSS custom property in gradient ✓ same
Browser support (2025) Chrome 150+, Safari 18.2+ All modern browsers

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗