v150 · CSS · Backgrounds

CSS background-clip: border-area

Chrome 150 adds border-area as a new value for the background-clip property. It clips an element's background to the area occupied by its border strokes — making gradient and image borders a one-liner instead of a multi-layer hack.

concepts

  1. Gradient Border Gallery

    A live playground for background-clip: border-area. Adjust border width, pick a gradient, and watch the background snap to only the border strokes. Compare the code to the old multi-layer trick it replaces.

  2. Clip Value Comparison

    Side-by-side rendering of all five background-clip values — border-box, padding-box, content-box, text, and border-area — applied to the same element so the visual difference between each is immediately clear.

  3. Animated Border Card

    A spinning conic gradient border animated via @property --angle and background-clip: border-area — the whole effect in one background-image declaration. Adjust border width, animation speed, and border radius, and compare the clean Chrome 150 syntax against the equivalent old two-layer trick.

  4. Multi-layer Composition

    Watch the old two-layer background hack and the new border-area approach produce identical gradient borders. Adjust border width, border radius, and gradient — then see where the approaches diverge. Generated CSS for both is shown side by side.

  5. border-area vs border-image

    Both background-clip: border-area and border-image make gradient borders — but they handle border-radius, composability, and other border properties differently. Four side-by-side scenario cards show exactly where each approach works and where it breaks.

  6. Dashed & Dotted Borders

    With dashed and dotted borders, background-clip: border-area paints the gradient only inside the visible painted pixels — gradient dashes, gradient dots. Adjust border width and pick gradients (linear, conic, repeating stripes) to see the effect across all eight border-style values, including rounded corners where dashes follow the curve.

why it shipped

Before Chrome 150, creating a gradient border required a two-layer background trick: a border-box-clipped gradient layer and a padding-box-clipped solid layer stacked on top, with border: solid transparent to let the bottom gradient show through. It worked, but it was fragile — the solid inner layer had to be listed first, the gradient sizes had to match, and border-radius required extra care. The alternative, border-image, overrides all other border styling and cannot be combined with border-radius. background-clip: border-area solves this cleanly: clip one background layer to the border strokes, keep a second layer for the content background, and both composed properties work independently. Safari already shipped border-area in 18.2, so Chrome 150 completes cross-browser support.

references

implementation reference

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