CSS corner-shape: squircles, biseles y muescas

Desde que existe, border-radius nos ha dado un único tipo de esquina: un cuarto de elipse. corner-shape cambia eso. Sigues usando border-radius para el tamaño de la esquina y añades una propiedad para su forma: squircle, bisel, curva cóncava, muesca o cualquier punto intermedio. Los bordes, el outline y las sombras siguen el nuevo contorno, y el navegador sabe animar de una forma a otra.

Antes de seguir, juega con la demo de arriba. Pulsa los botones de forma, arrastra el control de K y dale a "Animar entre formas". Fíjate en el borde verde azulado y en el resplandor: no son una capa aparte, se doblan con la caja.

El tamaño lo pone border-radius; la forma, corner-shape

La propiedad no sustituye a border-radius, se apoya en él. MDN lo dice sin rodeos: si el contenedor no tiene border-radius, o este se resuelve a 0, corner-shape no tiene ningún efecto.

.card {
  border-radius: 56px;   /* lo grande que es la esquina */
  corner-shape: scoop;   /* qué forma tiene */
}

Eso es todo lo que lleva la forma principal de la demo. Las palabras clave son:

square = superellipse(infinity): una esquina recta de las de siempre.
squircle = superellipse(2): entre redonda y cuadrada, el aspecto de icono de app.
round = superellipse(1): el border-radius de toda la vida, y el valor inicial.
bevel = superellipse(0): un corte diagonal recto (un bisel).
scoop = superellipse(-1): un cuarto de círculo cóncavo, como un mordisco.
notch = superellipse(-infinity): una muesca cóncava de 90°.

Como el valor inicial es round, añadir corner-shape a un diseño que ya existe no cambia nada hasta que eliges otra forma.

Qué significa de verdad superellipse(K)

Todas las palabras clave son puntos de una misma escala continua. La especificación define superellipse(K) como un cuarto de superelipse con exponente 2^K. Una superelipse es la curva |x|^n + |y|^n = 1:

Con K = 1, n = 2 y sale un círculo: round.
Con K = 2, n = 4: el squircle, de lados más planos.
Con K = 0, n = 1: una línea recta, bevel.
Una K negativa refleja la curva hacia dentro, así que superellipse(-1) es un círculo cóncavo, scoop.

Es lo que dibuja el pequeño gráfico de la esquina en la demo. Es la misma fórmula que uso en el plan B (lo explico más abajo): cada esquina se muestrea con la superelipse paramétrica x = cos(t)^(2/n), y = sin(t)^(2/n) y se refleja hacia dentro cuando K es negativa.

También puedes combinar formas por esquina, con el mismo orden en el sentido de las agujas del reloj que border-radius (arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda):

.launch {
  border-radius: 14px 0;  /* solo arriba-izquierda y abajo-derecha */
  corner-shape: notch;
}

.tag {
  border-radius: 0 32px 32px 0;
  corner-shape: bevel;    /* el lado derecho se convierte en una flecha */
}

Son dos de las cuatro piezas pequeñas de la parte de abajo de la demo. También hay propiedades individuales: corner-top-left-shape, lógicas como corner-start-start-shape, y atajos por lado como corner-top-shape.

Bordes, sombras y animación incluidos

Esto es lo que lo convierte en algo más que un truco con clip-path. Según MDN, el fondo, el borde, el outline, box-shadow, overflow y backdrop-filter siguen la forma de la esquina. Un clip-path solo recorta píxeles: el borde queda cortado y la sombra desaparece.

La especificación tiene un matiz: el borde interior sigue la curva exterior a una distancia casi constante, pero box-shadow no calca el trazado exacto, sino que escala la forma de la esquina alineada con los ejes. Con sombras de mucho spread puedes notar una pequeña diferencia.

Y se anima:

.card {
  transition: corner-shape .9s cubic-bezier(.3, .8, .2, 1);
}

El navegador interpola el parámetro K, no la palabra clave. Pero la especificación no mueve K de forma lineal. Ir de bevel (0) a round (1) y a square (infinito) linealmente arrancaría muy rápido y se arrastraría al final, así que primero lleva K a una escala de 0 a 1. Lo he comprobado en Chromium: a los 400 ms de una transición lineal de un segundo de round a notch, getComputedStyle devuelve superellipse(-0.327908), una forma intermedia de verdad y no un salto.

Soporte y trampas

De momento, solo Chromium. Las notas de la versión 139 de Chrome incluyen "Corner shaping (corner-shape, superellipse, squircle)", y webstatus.dev lo da en Chrome y Edge desde agosto de 2025. Firefox y Safari aún no lo tienen, así que está lejos de ser Baseline.
Si redondo te vale, el plan B sale gratis. En un navegador sin soporte, corner-shape se ignora y border-radius sigue dibujando esquinas redondas. Para un botón con squircle es una degradación perfectamente aceptable.
Las formas cóncavas necesitan plan B. Si tu diseño depende de un scoop o una muesca (una entrada, un marco de estilo sci-fi), una esquina redonda no es lo mismo. Detecta el soporte con @supports (corner-shape: squircle) o CSS.supports('corner-shape', 'squircle'). Entonces la demo calcula la misma superelipse como clip-path: polygon() y muestra un aviso. Y no esconde el precio: en Firefox y Safari la forma es correcta, pero el borde y la sombra ya no la siguen, así que la demo cambia la sombra por un filtro drop-shadow() en un contenedor.
Las esquinas opuestas pueden chocar. Con radios grandes y formas cóncavas, MDN avisa de que el navegador limita los valores para evitar que se solapen, así que el resultado puede ser más pequeño de lo que pediste.
El contenido no cambia de forma. El texto y la zona de hover siguen siendo de la caja rectangular. Deja padding cerca de las esquinas con muesca o cóncavas.

Qué vigilar

Si Firefox y Safari incorporan corner-shape. Hasta entonces, úsalo como mejora encima de border-radius.
El resto de CSS Borders Level 4, donde vive esto. Es un Editor's Draft que también incluye border-shape y los bordes parciales, así que algunos detalles pueden cambiar.
Las herramientas de diseño exportando squircles. Como superellipse() acepta cualquier número, un sistema de diseño ya puede nombrar su curva de esquina exacta en CSS en lugar de usar una máscara SVG.