# background-clip: border-area (gradient borders)

Status: Nur Chrome 150 (Juni 2026). Nicht Baseline.  
Quelle: https://developer.chrome.com/release-notes/150  
Seite: https://designforai.dev/de/css/background-clip

Beschneidet einen Hintergrund auf die Border-Box minus Padding-Box, sodass ein Verlaufsrand eine Deklaration ist, ohne `border-image` (das `border-radius` bricht) oder den Doppelhintergrund-Trick.

## HTML

```html
<div class="fx-057">Gradient border, rounded</div>
```

## CSS

```css
.fx-057{
  padding:16px 20px;border:3px solid transparent;border-radius:14px;font:600 15px system-ui;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#2563eb,#ec4899) border-box; /* fallback */
}
@supports (background-clip: border-area){
  .fx-057{background:linear-gradient(120deg,#2563eb,#ec4899);background-clip:border-area}
}
```

Fallback: Der padding-box/border-box-Doppelhintergrund darüber ist der browserübergreifende Fallback.

## Prompt

Nutze für Verlaufsränder mit Radius `border: Npx solid transparent; background: <gradient>; background-clip: border-area` innerhalb von `@supports (background-clip: border-area)`, mit dem klassischen zweischichtigen `padding-box` / `border-box`-Hintergrund als Fallback. Nutze nie `border-image`, wenn Ecken rund sein müssen.