background-clip: border-area (gradient borders)

Só Chrome 150 (junho de 2026). Não é Baseline.

Chrome 150Edge 150Safari noFirefox no

Recorta um fundo para a border box menos a padding box, então uma borda em gradiente vira uma declaração, sem `border-image` (que quebra `border-radius`) nem o truque de fundo duplo.

Gradient border, rounded

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}
}

HTML

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

Fallback: O fundo duplo padding-box/border-box acima é o fallback multiplataforma.

Fonte: developer.chrome.com/release-notes/150

Prompt

Para bordas em gradiente com raio use `border: Npx solid transparent; background: <gradient>; background-clip: border-area` dentro de `@supports (background-clip: border-area)`, com o clássico fundo de duas camadas `padding-box` / `border-box` como fallback. Nunca use `border-image` quando os cantos precisarem ser arredondados.