corner-shape (squircle, scoop, notch, bevel, superellipse())

Só Chrome 139; Safari e Firefox sem cronograma público (2026-09). Não é Baseline.

Chrome 139Edge 139Safari noFirefox no

Muda o que `border-radius` desenha: `squircle` (curvas contínuas estilo iOS), `scoop` (para dentro), `notch` (recortes quadrados), `bevel` (chanfros), ou qualquer `superellipse(k)`. Aplica por canto e anima.

squirclescoopnotchbevel

CSS

.fx-050 {
  display: flex;
  gap: 12px;
  font: 13px system-ui;
  color: #fff
}
.fx-050 span {
  display: grid;
  place-items: center;
  width: 90px;
  height: 60px;
  background: #2563eb;
  border-radius: 20px
}
.fx-050 .sq {
  corner-shape: squircle
}
.fx-050 .sc {
  corner-shape: scoop
}
.fx-050 .no {
  corner-shape: notch
}
.fx-050 .be {
  corner-shape: bevel
}

HTML

<div class="fx-050"><span class="sq">squircle</span><span class="sc">scoop</span><span class="no">notch</span><span class="be">bevel</span></div>

Fallback: Os outros navegadores renderizam cantos arredondados normais; use `@supports (corner-shape: squircle)` só se o design precisar mudar em outro lugar.

Fonte: developer.mozilla.org/docs/Web/CSS/Reference/Properties/corner-shape and https://caniuse.com/mdn-css_properties_corner-shape

Prompt

Dê a botões, cards e avatares `corner-shape: squircle` junto com um `border-radius` generoso para cantos contínuos estilo iOS; use `bevel`/`notch`/`scoop` para formas de ingresso e etiqueta. É só Chromium em 2026, então o `border-radius` base é o fallback e nenhum polyfill em JS ou clip-path deve ser adicionado.