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

Solo Chrome 139; Safari y Firefox no tienen calendario público (2026-09). No es Baseline.

Chrome 139Edge 139Safari noFirefox no

Cambia lo que dibuja `border-radius`: `squircle` (curvas continuas al estilo iOS), `scoop` (hacia dentro), `notch` (recortes cuadrados), `bevel` (chaflanes) o cualquier `superellipse(k)`. Se aplica por esquina y se 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: Los demás navegadores renderizan esquinas redondeadas normales; usa `@supports (corner-shape: squircle)` solo si el diseño debe cambiar en otra parte.

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

Prompt

Da a botones, tarjetas y avatares `corner-shape: squircle` junto con un `border-radius` generoso para esquinas continuas al estilo iOS; usa `bevel`/`notch`/`scoop` para formas de ticket y etiqueta. Es solo Chromium en 2026, así que el `border-radius` base es el respaldo y no debe añadirse ningún polyfill con JS ni clip-path.