CSS deja atrás las cajas: shape(), border-shape y corner-shape llegan a los navegadores
Tres construcciones nuevas del lenguaje permiten definir bordes con curvas, muescas o formas arbitrarias sin salir de la hoja de estilos. Chrome, Edge y Opera ya las soportan.
El CSS lleva tres décadas dibujando rectángulos. Tres construcciones nuevas —la función shape() y las propiedades border-shape y corner-shape— empiezan a romper esa geometría y permiten describir bordes curvos, muescas o formas arbitrarias sin salir de la hoja de estilos. Chrome, Edge y Opera ya soportan las tres en sus versiones actuales; el resto de motores va por detrás.
El punto de partida está en 1996, cuando el W3C publicó su primer estándar de maquetación. Por entonces los motores de renderizado y los controladores gráficos eran primitivos, y a nadie le apetecía calcular coordenadas raras: era mucho más barato que el texto fluyera dentro de un espacio simple. De ahí la tiranía del rectángulo. Salir de ella exigía plugins propietarios tipo Flash o apaños con JavaScript.
El primer intento serio de mezclar formas y maquetación fue path(), que permite incrustar SVG directamente en CSS. Tenía un problema: todo se definía en píxeles, no entendía variables ni unidades CSS y no se adaptaba a cambios de tamaño de la página. shape() arregla eso porque se apoya en sintaxis CSS responsive. Combinada con la propiedad clip-path ya se usa para dibujar troquelados de entradas, burbujas de chat y otros adornos.
Bordes que ya no son bordes
border-shape cierra el círculo: toma las coordenadas definidas con shape() y las aplica a los bordes reales de la página. La diferencia no es cosmética. Esos límites se calculan al principio del proceso de renderizado, en lugar de recortarse casi al final, como hacía clip-path. "En otras palabras, poner bordes a formas CSS va a ser cosa de niños", resume Temani Afif en su tutorial en CSS-Tricks.
Afif enseña varios ejemplos: bordes dentro de bordes, recortes rellenando el hueco entre la forma exterior y la interior, o un corazón abierto dentro de una caja cuadrada hecho solo con CSS. Cualquiera de las dos formas, la externa o la interna, se puede animar: que el contorno cambie al pasar el ratón por encima, que el interior se rellene con una imagen, que la forma se encoja o que un texto quede subrayado con una línea ondulada.
Si escribir las coordenadas a mano no apetece, corner-shape trae patrones predefinidos: esquinas redondeadas, biseladas, con muescas, con cucharón y una que ya se conoce como squircle.
Lo que aún no está listo
Según caniuse.com, todos los navegadores principales soportan ya shape(). Las otras dos siguen en implementación y se consideran experimentales, aunque las versiones actuales de Chrome, Edge y Opera las aceptan. Para quien tenga que dar soporte a Firefox o Safari, la recomendación de siempre: comprobar antes de meterlas en producción y dejar un plan B.
Lo interesante no es dibujar un corazón. Es que la maquetación deja de estar atada a la caja y pasa a ser una decisión de diseño, con animación incluida y sin JavaScript de por medio. La especificación está ahí; lo que salga de ella depende de lo que aguanten las hojas de estilos de un sitio real.
