⬭ Generador de Border-Radius CSS
Genera valores CSS border-radius perfectos al píxel en segundos — sin cuenta, sin instalación, nada se envía al servidor. Arrastra los controles por esquina, usa Blob Aleatorio para formas orgánicas y pega el CSS directamente en tu hoja de estilos.
Set independent horizontal (x) and vertical (y) radii per corner.
Acerca de
Este generador de CSS border-radius ofrece tres modos de edición en una sola herramienta gratuita y disponible sin conexión: el modo Simple ajusta las cuatro esquinas a la vez, el modo Por Esquina permite afinar cada una de forma independiente, y el modo Elíptico desbloquea radios horizontales y verticales separados por esquina, aprovechando toda la potencia de la sintaxis abreviada de CSS border-radius. Un diagrama SVG en vivo refleja cada cambio en tiempo real, y el botón Blob Aleatorio usa un algoritmo criptográficamente aleatorio para crear las formas orgánicas tan populares en el diseño UI moderno. Como todo ocurre en tu navegador, tus diseños permanecen privados y la herramienta funciona incluso sin conexión a internet.
Cómo usar
- Elige un modo — Simple (todas las esquinas), Por Esquina o Elíptico (radios x/y separados) — usando los botones en la parte superior del panel de controles.
- Arrastra los controles deslizantes o escribe valores directamente en los campos numéricos para definir el radio de cada esquina. La vista previa y el diagrama SVG se actualizan al instante.
- Haz clic en Blob Aleatorio para generar una forma orgánica aleatoria usando radios elípticos independientes — ideal para elementos UI decorativos y fondos hero.
- Revisa el CSS abreviado generado en el cuadro de salida — la herramienta aplica automáticamente la sintaxis válida más corta (p. ej., colapsa valores idénticos).
- Haz clic en Copiar CSS para copiar el código al portapapeles y pégalo directamente en tu hoja de estilos o herramienta de diseño.
Preguntas frecuentes
- ¿Este generador de CSS border-radius es completamente gratuito?
- Sí, 100 % gratuito, sin cuenta, sin suscripción y sin límites ocultos. Abre la página y empieza a generar CSS border-radius de inmediato.
- ¿La herramienta funciona sin conexión a internet?
- Sí. La herramienta se ejecuta completamente en tu navegador sin llamadas al servidor. Una vez cargada la página, puedes desconectarte de internet y seguirá funcionando. Tu última configuración también se guarda localmente en el navegador.
- ¿Mis datos de diseño se mantienen privados?
- Totalmente. Ningún dato sale jamás de tu navegador — no hay subidas, ni análisis de tus entradas, ni almacenamiento en servidor. Todo permanece en tu dispositivo.
- ¿Qué hace el modo Elíptico?
- El modo Elíptico permite definir radios horizontales (x) y verticales (y) independientes para cada una de las cuatro esquinas, generando la sintaxis abreviada completa de CSS border-radius con notación de barra — por ejemplo, border-radius: 40% 20% / 20% 40%. Esto desbloquea formas asimétricas y ovaladas que los modos Simple y Por Esquina no pueden crear.
- ¿Para qué sirve el botón Blob Aleatorio?
- Blob Aleatorio usa un algoritmo criptográficamente aleatorio para generar una forma orgánica e irregular asignando radios elípticos aleatorios a las ocho combinaciones de esquina y eje. Es ideal para crear las fluidas formas blob tan habituales en landing pages modernas, avatares y fondos decorativos — con un solo clic.