16 · Corner shape
Corner shape
Esquinas scoop, bevel, notch y squircle nativos
corner-shape
Define la forma de las esquinas más allá de border-radius: round, scoop, bevel, notch y superellipse().
round
scoop
bevel
notch
superellipse()
corner-shape: superellipse(0.6)
superellipse()
La función superellipse() crea esquinas tipo "squircle" — entre un cuadrado y un círculo, como los iconos de iOS, sin el math de SVG.
corner-shape: superellipse(0.7)
Sin JS
Antes necesitabas SVG mask + clip-path o librerías para un squircle. Ahora es una propiedad CSS nativa.
/* esquinas cóncavas (hacia adentro) */
.cs-scoop {
border-radius: 30%;
corner-shape: scoop;
}
/* esquinas en ángulo recto */
.cs-bevel {
corner-shape: bevel;
}
/* esquinas con muesca */
.cs-notch {
corner-shape: notch;
}
/* squircle — entre cuadrado y círculo */
.cs-super {
corner-shape: superellipse(0.6);
}Nota honesta sobre soporte
Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.