Generador de Border Radius CSS
Controla los 8 valores de border-radius visualmente.
Crea formas blob con vista previa en tiempo real.
Acerca de
El Generador de Border Radius CSS te permite controlar visualmente los 8 valores de border-radius (radio horizontal y vertical de cada una de las 4 esquinas) y ver el resultado en tiempo real.
Más allá de las esquinas redondeadas habituales, puedes crear formas blob complejas muy populares para decoraciones de sección hero. Todo se procesa localmente en tu navegador.
Cómo Usar
Elige un preajuste
Comienza desde un preajuste (Círculo, Hoja, Blob, etc.) para obtener rápidamente una forma base y luego ajústala con los sliders.
Ajusta los sliders
Arrastra los sliders horizontales y verticales de cada esquina. La vista previa se actualiza al instante.
Copia el CSS
Haz clic en "Copiar" para llevar el código generado al portapapeles y pegarlo en tu hoja de estilos.
Glosario
- border-radius
- Propiedad CSS que redondea las esquinas de un elemento. Admite unidades px y % con valores independientes por esquina.
- Radio horizontal / vertical
- Los dos radios de la elipse definida por border-radius. El separador "/" divide los valores horizontales (antes) de los verticales (después).
- Blob
- Forma orgánica e irregular creada al definir valores asimétricos en los 8 ejes de border-radius.
- clip-path
- Propiedad CSS para recortar elementos con formas personalizadas. Más flexible que border-radius pero con sintaxis más compleja.
- Shorthand
- border-radius: 10px 20px 30px 40px — especifica las 4 esquinas en una sola declaración. Usa "/" para separar horizontal y vertical.
FAQ
- Q.¿Qué son los 8 valores?
- Cada una de las 4 esquinas tiene un radio horizontal y uno vertical, dando 8 valores en total. Formato: border-radius: A B C D / E F G H.
- Q.¿Para qué sirven las formas blob?
- Decoración de fondo en secciones hero, máscaras para fotos de perfil, formas únicas para botones CTAs, y más.
- Q.¿Se envían datos a algún servidor?
- No. Todo se genera localmente en tu navegador.
- Q.¿Funciona en IE11?
- border-radius funciona desde IE9. La notación elíptica (con "/") también funciona desde IE9+.
Casos de Uso
Diseño de Botones y Tarjetas
Crea formas únicas para botones y componentes de tarjeta que van más allá del círculo estándar.
Decoración Blob de Fondo
Usa formas blob orgánicas para decorar secciones hero en landing pages.
Máscara para Imagen de Perfil
Explora máscaras únicas para fotos de perfil más allá del círculo o cuadrado clásico.
Aprender CSS
Comprende visualmente cómo funciona border-radius experimentando con los sliders.