v150 · CSS · demo

Gradient Border Gallery

Adjust border width and pick a gradient to see background-clip: border-area in action. The background is visible only in the border strokes themselves — the content area is untouched.

background-clip: border-area in this browser checking…
Border width
16px
Gradient
Rectangle
Content area
Rounded (16px)
Content area
Double border
Content area
Dashed border
Content area
Before vs. After Chrome 150
Old trick — two background layers
Same visual result
.element {
  border: 16px solid transparent;
  background-image:
    linear-gradient(white, white),  /* content bg */
    linear-gradient(135deg, blue, rose);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}
Chrome 150 — border-area
Same visual result
.element {
  border: 16px solid transparent;
  background: linear-gradient(135deg, blue, rose);
  background-clip: border-area; /* done */
}

references

implementation reference

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