Generador de Border Radius
Arrastra los manejadores de esquina para esculpir blobs orgánicos con 8 radios independientes, y copia el código CSS o Tailwind.
Cómo usar el generador de Border Radius
- Arrastra cualquiera de los 4 manejadores de esquina directamente sobre la caja de vista previa para darle forma visualmente.
- Afina con los deslizadores: cada esquina tiene un radio horizontal y vertical independientes.
- Prueba los presets: blobs, hoja, huevo y formas de ticket a un clic.
- Iguala los colores de la caja y el fondo a tu diseño real para una vista previa precisa.
- Copia la declaración border-radius desde la pestaña CSS, o toma la clase Tailwind.
Acerca de este generador de Border Radius
La mayoría conoce border-radius como un solo valor, pero la propiedad acepta hasta 8 valores: cuatro radios horizontales y cuatro verticales, separados por una barra (p. ej. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). Esta sintaxis con barra es el secreto detrás de las formas orgánicas «blob» presentes en todo el diseño web moderno.
Este generador expone los 8 valores como deslizadores y como manejadores de esquina arrastrables, para que esculpas la forma exacta que quieres sin memorizar la sintaxis. Cuando todas las esquinas comparten radios horizontales y verticales iguales, la salida se simplifica automáticamente a la notación estándar de 1–4 valores. El código generado funciona en todos los navegadores modernos, y la pestaña Tailwind produce una clase rounded-[...] de valor arbitrario.
FAQ de Border Radius
¿Qué es la sintaxis con barra (/) en border-radius?
En border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%, los valores antes de la barra son los radios horizontales de las cuatro esquinas (superior izquierda, superior derecha, inferior derecha, inferior izquierda) y los de después son sus radios verticales. Radios horizontales y verticales diferentes crean esquinas elípticas, la base de las formas blob orgánicas.
¿Cómo hago un círculo perfecto?
Pon todas las esquinas al 50% (o haz clic en el preset Círculo). En un elemento cuadrado, border-radius: 50% produce un círculo perfecto; en un rectángulo produce una elipse. Los porcentajes son relativos al ancho y alto propios del elemento.
¿Debo usar porcentajes o píxeles para border-radius?
Los porcentajes escalan con el elemento, haciendo formas responsivas ideales para blobs. Los píxeles dan un tamaño de esquina fijo, mejor para componentes UI como botones y tarjetas donde quieres un redondeo consistente sin importar el tamaño. Este generador usa porcentajes para que tus formas mantengan la proporción a cualquier tamaño.
¿Por qué mi blob se ve aplastado en un elemento ancho?
Los radios en porcentaje son relativos a las dimensiones del elemento: el 50% horizontal en una caja de 400px de ancho son 200px, mientras el 50% vertical en una caja de 200px de alto son 100px. Es el comportamiento esperado: la forma se adapta a la caja. Previsualiza con la misma relación de aspecto que tu elemento real para mayor precisión.
¿La sintaxis de 8 valores funciona en todos los navegadores?
Sí. La sintaxis con barra para esquinas elípticas es parte de la especificación CSS Backgrounds and Borders y está soportada por todos los navegadores modernos (Chrome, Edge, Firefox, Safari) sin prefijos.