CSS corner-shape: La guía completa para esculpir tus interfaces
Durante mucho tiempo, la Web utilizó una sola forma para las esquinas: el arco de círculo. La propiedad border-radius
es muy útil, pero limitada. No puede crear ángulos rectos cortados (biseles) o formas más complejas sin ayuda externa.
La propiedad corner-shape cambia esto. Permite elegir la forma de la esquina sin cambiar su tamaño. Es una
revolución para el rendimiento porque todo es gestionado de forma nativa por el navegador.
¿Por qué usar corner-shape?
Anteriormente, para crear una esquina biselada, utilizábamos imágenes o máscaras complejas. Estos métodos ralentizan el
sitio. corner-shape ofrece tres ventajas:
- Rapidez: El navegador dibuja la forma directamente.
- Ligereza: Menos código y sin imágenes que cargar.
- Flexibilidad: La forma se adapta automáticamente al tamaño del bloque.
Aquí tienes un ejemplo de código fluido y eficiente:
.card {
background-color : #1a1a1a;
border-radius : clamp(1rem * $font-size, 5vi, 3rem * $font-size);
corner-shape : bevel;
inline-size : 100%;
padding : 2rem * $font-size;
}
Las cuatro formas básicas
La propiedad corner-shape propone cuatro palabras clave sencillas. Cada una cambia la forma en que se traza la
esquina.
1. El modo Round (redondeado)
Es el valor por defecto. El navegador dibuja un cuarto de círculo. Es lo que hace border-radius por sí solo.
2. El modo Bevel (biselado)
El bisel corta la esquina con una línea recta. Es ideal para diseños modernos o industriales. El cálculo es muy sencillo para la unidad de procesamiento gráfico (GPU), lo que hace que la visualización sea instantánea.
3. El modo Scoop (excavado)
El modo scoop crea una curva hacia el interior. Imagina que se retira un trozo de círculo de la esquina del bloque. Es
muy difícil de lograr sin esta propiedad.
4. El modo Notch (muesca)
La muesca crea un recorte en forma de escalón. La esquina se compone de dos líneas rectas que se unen en el interior del bloque.
La superelipse: el secreto del diseño de alta gama
La función superellipse() es la parte más técnica de corner-shape. Permite crear curvas muy suaves, a menudo
llamadas “squircles”.
¿Qué es una superelipse?
Es una forma matemática entre el cuadrado y el círculo. A diferencia de un círculo, la curva comienza muy suavemente. No hay un corte visible entre la línea recta y el inicio de la esquina. Apple utiliza mucho esta forma para sus iconos y productos.
.premium-box {
aspect-ratio : 1 / 1;
border-radius : 20%;
corner-shape : superellipse(2.5);
inline-size : min(20rem * $font-size, 80vi);
}
En este código, el número 2.5 es el exponente matemático.
- Si el número es 2, es un círculo perfecto.
- A medida que el número aumenta, la esquina se vuelve más “llena” y se acerca a un cuadrado.
¿Cómo muestra el navegador estas formas?
Para garantizar el máximo rendimiento, hay que entender qué ocurre en el navegador.
El flujo de renderizado (Pipeline)
Cuando usas corner-shape, el navegador sigue estos pasos:
- Cálculo del layout: Define el tamaño del bloque (el rectángulo).
- Fase de painting: Dibuja el borde con la forma elegida.
La ventaja de corner-shape es que no afecta a la etapa de layout. El bloque mantiene el mismo tamaño, sin importar
la forma de la esquina. Esto evita que el navegador tenga que rehacer todos los cálculos de posición si la forma cambia,
por ejemplo, al pasar el ratón (hover).
Aceleración por hardware
El trazado de formas como el bisel o la superelipse se envía directamente a la GPU. La GPU está diseñada para dibujar vectores muy rápidamente. Es mucho más eficiente que utilizar filtros o máscaras de JavaScript.
Accesibilidad y confort visual
Un buen código debe ser legible para todos, incluidos los usuarios de herramientas de asistencia.
El contorno de selección
Un gran problema con las técnicas antiguas era que el anillo de selección (al usar la tecla Tab) seguía siendo
rectangular. Con corner-shape, el navegador adapta el anillo de enfoque a la forma de la esquina.
.interactive-element:focus-visible {
outline : .2rem * $font-size solid #4a90e2;
outline-offset : .4rem * $font-size;
}
Unidades fluidas
Usamos rem y la variable $font-size para que las esquinas se adapten al tamaño del texto del usuario. Si una persona
aumenta el tamaño de la fuente en su navegador, las esquinas seguirán siendo proporcionales y la interfaz se mantendrá
limpia.
Resumen para el desarrollador
Para optimizar tu interfaz con corner-shape, recuerda estos puntos:
- Usa bevel para un aspecto técnico y un rendimiento máximo.
- Usa superellipse para un aspecto suave y lujoso.
- Usa unidades relativas (
rem) para que el diseño sea accesible. - Evita las imágenes de esquinas para ganar milisegundos valiosos en la carga.
corner-shape es la herramienta perfecta para combinar un diseño complejo con una velocidad de carga increíble. Es el
futuro del diseño web de alto rendimiento.
Preguntas frecuentes (FAQ)
¿Funciona corner-shape con las sombras (box-shadow)?
Sí. La sombra sigue exactamente la forma de la esquina. Si haces una muesca, la sombra también tendrá una muesca. Es
automático y muy rápido.
¿Reemplaza esto a border-radius?
No. Ambos trabajan juntos. border-radius define el tamaño del área de la esquina, y
corner-shape define el estilo del trazo en esa zona.
¿Por qué el rendimiento es mejor que con SVG?
Porque el motor CSS del navegador tratacorner-shape como una instrucción de dibujo básica. Un archivo SVG
debe ser leído, analizado y transformado en píxeles, lo que consume más tiempo y memoria.
