Entrevista sobre CSS corner-shape: ¿Cómo mejorar progresivamente las esquinas geométricas?

Consigna y alcance

Eres responsable de un componente de tarjeta multinavegador. Los navegadores modernos pueden renderizar bevel, scoop y squircle, mientras que los navegadores más antiguos solo comprenden border-radius. Explica la condición previa para corner-shape, la alternativa de reserva (fallback) y el plan de aceptación visual y de interacción.

Esto evalúa geometría CSS, mejora progresiva e ingeniería de componentes. corner-shape modifica las esquinas producidas por un border-radius existente; no tiene ningún efecto cuando el radio se resuelve en cero. Separa el renderizado (painting), el diseño del contenido y las áreas de impacto del puntero en la respuesta.

Qué evalúa el entrevistador

Una respuesta sólida mantiene una línea base utilizable con border-radius y añade la mejora detrás de una consulta de características (feature query). Explica el orden de esquinas de uno a cuatro valores, la curvatura positiva y negativa de superellipse(), las restricciones de radio cuando las esquinas opuestas se superponen y qué efectos renderizados siguen la forma.

El entrevistador también espera que evites tratar la forma como un recorte de contenido. MDN señala que el contenido se distribuye según la caja original y que el estado hover aún puede aplicarse fuera de la esquina visible, por lo que la visibilidad del foco y las pruebas de impacto necesitan sus propias comprobaciones.

Preguntas para clarificar

Qué aspecto visual deben conservar los navegadores más antiguos

Si una tarjeta redondeada es suficiente, mantén border-radius. Si la geometría de la marca debe coincidir de forma exacta, una alternativa con SVG o pseudoelementos añade costos de mantenimiento y renderizado.

La forma define el límite de interacción

Confirma si los enlaces, botones o elementos arrastrables deben coincidir con el contorno visible. Una forma de esquina CSS no cambia necesariamente la prueba de impacto de eventos ni de contenido, por lo que una captura de pantalla no es suficiente.

Se requieren animaciones y RTL

Verifica si los navegadores de destino interpolan superellipse() y respetan reduced-motion. Prefiere propiedades lógicas desglosadas (longhands) de esquinas para diseños multilingües en lugar de asumir que la esquina superior izquierda física es el inicio en línea (inline start).

Una respuesta en 30 segundos

“Comienzo con border-radius como línea base y aplico corner-shape dentro de @supports. La propiedad altera el renderizado de un radio existente, no la disposición del contenido; los navegadores restringen los radios cuando las esquinas opuestas se superponen, por lo que pruebo tamaños extremos. Verifico por separado los anillos de foco, las áreas de impacto y el desbordamiento (overflow), y proporciono alternativas para soporte de características y reduced-motion en animaciones.”

Solución paso a paso

Paso 1: Establecer una línea base degradable

Escribe primero el estilo base para que las tarjetas conserven borde, fondo, sombra y esquinas redondeadas sin la nueva propiedad. Añade la mejora detrás de una consulta de características:

.card {
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

@supports (corner-shape: scoop) {
  .card {
    corner-shape: scoop notch;
  }
}

Los navegadores no compatibles ignoran la declaración desconocida y mantienen la línea base. No coloques contraste, texto legible o instrucciones esenciales únicamente en la mejora.

Paso 2: Explicar el mapeo de valores y las condiciones previas

Un valor se aplica a las cuatro esquinas; dos valores forman pares diagonales; tres valores asignan el tercero a la esquina inferior derecha; cuatro valores asignan en sentido horario superior izquierda, superior derecha, inferior derecha e inferior izquierda. corner-shape depende de border-radius, por lo que un radio de cero no produce ninguna forma.

El valor numérico de superellipse() controla la curvatura, produciendo formas convexas y cóncavas mediante valores positivos y negativos. En una entrevista, aclara que los nombres de sintaxis deben verificarse contra la salida renderizada en los navegadores de destino en lugar de inferirse de una etiqueta en una herramienta de diseño.

Paso 3: Gestionar la superposición y los límites de renderizado

Cuando los radios y formas de esquinas opuestas se superponen, el navegador restringe los radios para evitar una colisión geométrica. Prueba tarjetas estrechas, radios porcentuales extremos y contenido denso para que el texto, los fondos, los bordes y las sombras permanezcan coherentes.

Los fondos, bordes, contornos, sombras de caja (box shadows), overflow y filtros de fondo (backdrop-filter) generalmente siguen la forma de la esquina. El contenido sigue respetando el modelo de caja. Si una imagen o un área de interacción realmente requiere recorte, utiliza un clip-path independiente, una máscara o una capa semántica de interacción.

Paso 4: Probar la interacción y la accesibilidad

El anillo de foco debe permanecer visible, y el orden de navegación por teclado, el estado de foco y el área del puntero deben coincidir entre los navegadores compatibles y los de reserva. Para una tarjeta que funciona como enlace, un área de impacto rectangular completa suele ser más utilizable que un contorno píxel por píxel; documenta ese balance en pruebas visuales.

Paso 5: Animar y respetar la dirección lógica

Las palabras clave pueden interpolar a través de valores equivalentes de superelipse, pero confirma el soporte de implementación. Asigna duraciones explícitas a hover, focus y cambios de estado, y desactívalas o acórtalas bajo prefers-reduced-motion: reduce. Usa propiedades lógicas de esquinas en componentes multilingües para que RTL no invierta la geometría prevista.

Paso 6: Construir una matriz de compatibilidad

Cubre Chromium con soporte, navegadores con soporte parcial o sin soporte, anchos estrechos, texto largo, imágenes, sombras, foco por teclado, pruebas de impacto táctil y movimiento reducido. Registra tanto el estado mejorado como el de reserva, documentando si la declaración se aplica, los cambios de diseño y la consistencia de los objetivos de eventos.

Respuesta modelo de alta calidad

Establecería border-radius como la línea base del producto y aplicaría corner-shape mediante @supports. Los navegadores más antiguos seguirán mostrando una tarjeta utilizable, mientras que la nueva forma mejorará la apariencia donde sea compatible. Verificaría que el radio no sea cero, explicaría el mapeo de uno a cuatro valores y probaría tarjetas estrechas y radios extremos para las restricciones de superposición.

No trataría la forma de la esquina como un recorte de contenido. Los fondos, bordes y sombras suelen seguirla, pero la disposición del contenido y las pruebas de impacto del puntero requieren comprobaciones independientes; el anillo de foco debe mantenerse visible. La animación incluye una rama para reduced-motion, RTL utiliza propiedades lógicas y la matriz de compatibilidad compara el comportamiento visual, de diseño, de teclado y táctil en lugar de confiar en una única captura de pantalla de un navegador moderno.

Errores comunes

• Síntoma → Declarar corner-shape sin border-radius → Por qué falla → Sin un radio efectivo no hay forma → Solución → Proporcionar primero la línea base redondeada.
• Síntoma → Usar corner-shape como recorte de imagen → Por qué falla → El contenido sigue la caja original → Solución → Usar overflow, clip-path o una máscara cuando se requiera recorte.
• Síntoma → Asumir que la esquina visible reduce el área de impacto → Por qué falla → Los eventos aún pueden apuntar a la caja original → Solución → Probar teclado, interacción táctil y objetivos de eventos por separado.
• Síntoma → Probar en un solo ancho → Por qué falla → Los radios opuestos pueden restringirse en un contenedor estrecho → Solución → Incluir tamaños extremos y texto extenso.
• Síntoma → Mostrar una tarjeta vacía en navegadores no compatibles → Por qué falla → La mejora se trató como un estilo esencial → Solución → Usar una consulta de características sobre una línea base estable.

Preguntas de seguimiento y respuestas

Pregunta de seguimiento 1: ¿Qué sucede cuando border-radius usa porcentajes?

Verifica el resultado computado del navegador de destino en lugar de asumir conversiones de porcentajes a píxeles fijos. Captura varias relaciones de aspecto para inspeccionar la superposición y la continuidad de las sombras. Si la forma de marca debe ser estable, usa un radio controlado en la capa de mejora manteniendo la alternativa base.

Pregunta de seguimiento 2: ¿Cómo puede el anillo de foco seguir la forma?

Preserva primero la visibilidad y el contraste, y luego considera adaptarlo con outline o un pseudoelemento. Si una técnica recorta el anillo, conserva un anillo rectangular en lugar de sacrificar la respuesta visual del teclado.

Pregunta de seguimiento 3: ¿Qué ocurre si se declaran tanto corner-shape como border-shape?

W3C y MDN especifican que border-shape anula el efecto de border-radius, mientras que corner-shape depende de border-radius. Trátalas como rutas geométricas alternativas y proporciona un fallback claro para la ruta no utilizada en lugar de asumir que se combinan.

Pregunta de seguimiento 4: ¿Cuándo evitarías esta propiedad?

Evítala cuando la cobertura de navegadores sea insuficiente, la forma interfiera con un recorte requerido o el equipo no pueda mantener alternativas visuales. Un border-radius estable, SVG o un pseudoelemento pueden ser mejores opciones cuando los objetivos de accesibilidad y rendimiento ya están cubiertos.