corner-shape: la evolución de border-radius en CSS

Gabriel Gómez Gómez ·

corner-shape: la evolución de border-radius en CSS

  • Durante años, el redondeo de esquinas en CSS se resolvió con una sola herramienta: border-radius. Funciona muy bien, pero tiene un límite: casi todo termina siendo variaciones de una elipse. Si querías un chaflán (corte diagonal), una muesca (notch), un recorte cóncavo (scoop) o una esquina tipo squircle (look moderno de UI), tocaba usar hacks: clip-path, SVG, máscaras, pseudo-elementos… y mantenimiento extra.

  • Ahí entra corner-shape: una propiedad que separa lo que antes estaba “mezclado” en border-radius y lo vuelve explícito.

    • El tamaño de la esquina (lo sigues controlando con border-radius).
    • La geometría de la esquina (la defines con corner-shape).

  • En simple: border-radius define cuánto y corner-shape define cómo.

  • El modelo mental correcto: “zona” vs “curva”

  • 1) Primero defines la “zona de esquina”

  • Esto lo hace border-radius. Delimitas el área donde existirá una esquina especial:

  • card.cssCSS
    .card { border-radius: 24px; }

  • Si border-radius es 0, no hay zona. Y si no hay zona, corner-shape no tiene nada que modificar.

  • 2) Luego defines la “curva” que llena esa zona

  • Aquí entra corner-shape: mismo tamaño de zona, distinta forma matemática.

  • card.cssCSS
    .card { border-radius: 24px; corner-shape: squircle; }

  • Aclaración importante: round, no rounded

  • En ejemplos informales verás corner-shape: rounded, pero el keyword válido es round (y es el valor por defecto).

  • valid.cssCSS
    .btn { border-radius: 14px; corner-shape: round; }

  • Sintaxis: 1 a 4 valores (igual que border-radius)

  • corner-shape admite 1 a 4 valores, igual que border-radius, para controlar cada esquina:

    • 1 valor: todas las esquinas.
    • 2 valores: (TL + BR) / (TR + BL).
    • 4 valores: (TL TR BR BL).
  • panel.cssCSS
    .panel {
  border-radius: 20px;
  corner-shape: notch round squircle bevel; /* TL TR BR BL */
}

  • Valores comunes: qué significa cada uno y cómo se usa

  • round — redondeo “clásico”

  • Es la esquina redondeada estándar (convexa). Útil para UI tradicional, neutral y universal.

  • btn.cssCSS
    .btn { border-radius: 14px; corner-shape: round; }

  • squircle — moderno, entre círculo y cuadrado

  • Curva convexa “más cuadrada” que round, típica de interfaces modernas (cards, botones, inputs).

  • card.cssCSS
    .card { border-radius: 24px; corner-shape: squircle; }

  • square — esquina cuadrada perfecta

  • Es una esquina de 90°. Útil cuando quieres mezclar formas por esquina o animar de “soft” a “sharp”.

  • box.cssCSS
    .box { border-radius: 24px; corner-shape: square; }

  • bevel — chaflán (corte diagonal)

  • Es un recorte recto diagonal. El tamaño del chaflán lo marca border-radius: con 8px es sutil; con 24px es evidente.

  • tag.cssCSS
    .tag { border-radius: 16px; corner-shape: bevel; }

  • scoop — curva cóncava (hacia adentro)

  • Es una esquina “mordida” cóncava. Útil para tickets, cupones o tarjetas decorativas.

  • ticket.cssCSS
    .ticket { border-radius: 22px; corner-shape: scoop; }

  • notch — muesca cuadrada cóncava

  • Es una muesca cóncava tipo recorte cuadrado. Da un look industrial/tech (HUD, fichas, tarjetas).

  • hud.cssCSS
    .hud { border-radius: 18px; corner-shape: notch; }

  • superellipse(n): control fino (lo mejor de corner-shape)

  • Además de keywords, puedes usar corner-shape: superellipse(n);. La intuición del parámetro n:

    • 0 → bevel (línea recta).
    • 1 → round (redondeo estándar).
    • 2 → squircle.
    • valores grandes → se acercan a square.
    • valores negativos → formas cóncavas (scoop/notch).

  • Ejemplos útiles

  • examples.cssCSS
    /* Más “cuadrada” que squircle, pero aún suave */
.icon { border-radius: 28px; corner-shape: superellipse(3); }

/* Casi cuadrada, con transición suave */
.panel { border-radius: 26px; corner-shape: superellipse(5); }

/* Intermedio entre bevel y round: redondeo más “tenso” */
.chip { border-radius: 14px; corner-shape: superellipse(0.5); }

  • Uso real en proyectos: mejora progresiva

  • Como corner-shape puede tener soporte variable, el patrón recomendado es usarlo como mejora progresiva: primero defines un UI correcto con border-radius y luego activas corner-shape solo si el navegador lo soporta.

  • 1) Fallback universal

  • fallback.cssCSS
    .card { border-radius: 24px; }

  • 2) Mejora condicional con @supports

  • progressive.cssCSS
    @supports (corner-shape: squircle) {
  .card { corner-shape: squircle; }
}

  • Con esto, en navegadores sin soporte todo se ve normal (solo border-radius), y en compatibles obtienes el extra visual sin romper nada.

  • Bonus: también afecta borde, sombras y recortes

  • Una ventaja práctica es que la forma de esquina impacta el recorte del fondo y se alinea con cómo se perciben bordes, outlines y sombras del elemento.

  • Conclusión

  • corner-shape no reemplaza border-radius; lo complementa. Sigues controlando el tamaño como siempre, pero ahora tienes una paleta geométrica mucho más rica: desde squircles modernos, chaflanes y recortes cóncavos, hasta muescas industriales. Resultado: CSS más declarativo y menos hacks.

  • Anexo: generador CSS para explorar corner-shape

  • Si quieres probar rápidamente distintos valores y copiar el CSS listo, aquí tienes un generador/preview que facilita la exploración inicial y la implementación en tus componentes:

  • Abrir generador/preview de corner-shape

  • Consulta el extenso artículo de Amit Sheen en Frontend Masters para obtener una excelente descripción general de la función y cómo funciona: