← Chrome 150 reference

v150 · covered on mdn

CSS background-clip: border-area

A new value for background-clip that clips an element's background to the visible painted area of its border strokes — making gradient and image borders straightforward without reaching for border-image. Chrome 150 ships the feature across desktop, Android, and WebView; Safari already supports it.

this API is documented on MDN

background-clip — CSS — MDN Web Docs

gendn doesn't duplicate APIs that MDN already covers. MDN's background-clip page documents all values including border-area, with syntax, usage notes, and examples for gradient and image borders. Browser-compat data will reflect Chrome 150 support once updated.

quick example

/* Gradient border without border-image complexity */
.fancy-border {
  border: 4px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #f093fb, #f5576c) border-area;
  background-clip: padding-box, border-area;
}

/* Or with the shorthand — background-origin defaults to border-box */
.simpler {
  border: 4px solid transparent;
  background-image: linear-gradient(135deg, oklch(0.7 0.2 300), oklch(0.7 0.2 180));
  background-clip: border-area;
}

The border-area value clips the background to the geometry painted by the border, taking border-width and border-style into account but ignoring transparency from border-color. When border-area appears in the background shorthand, background-origin automatically defaults to border-box.

references