Generador de border radius
Cuatro deslizadores para las clásicas esquinas redondeadas, o el modo orgánico de 8 valores para formas «blob». Vista previa instantánea y código CSS listo para copiar.
Radios horizontales (antes de la / barra):
Radios verticales (después de la / barra):
La sintaxis de doble radio (con la barra)
Cada esquina de border-radius es en realidad un cuarto de elipse, definido por un
radio horizontal y uno vertical. Cuando escribes border-radius: 60% 40% 30% 70% / 60%
30% 70% 40%, los cuatro valores antes de la barra fijan los radios horizontales de las esquinas
(en sentido horario desde arriba a la izquierda) y los que van después de la barra fijan los radios verticales. Cuando los dos
radios de una esquina son distintos, la curva se vuelve asimétrica: así es exactamente como nacen
las formas orgánicas.
Dónde lucen las formas blob
Las formas orgánicas funcionan de maravilla como marco para fotos de perfil, fondos decorativos en las
secciones hero y botones con un aire desenfadado. Usar porcentajes en vez de píxeles permite que la forma
se adapte a cualquier tamaño de elemento; incluso puedes animar el paso de un blob a otro con un simple
transition: border-radius .4s para un efecto de gelatina al pasar el ratón.