border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

Generador de Radio de Borde en Línea Gratuito — Editor Visual de CSS

Crea valores personalizados de border-radius en CSS de forma visual. Diseña esquinas redondeadas, botones en forma de píldora, formas orgánicas y figuras creativas con una vista previa en vivo y una salida instantánea de CSS.

¿Qué es un generador de radio de borde?

Un generador de radio de borde es una herramienta visual que ayuda a los diseñadores web a crear valores de CSS border-radius sin tener que calcular manualmente valores en píxeles o porcentajes. En lugar de escribir números y recargar tu navegador, ajustas deslizadores y ves cómo cambia la forma en tiempo real.

La propiedad CSS border-radius redondea las esquinas de un elemento. Es una de las propiedades más versátiles de CSS — capaz de crear desde esquinas redondeadas sutiles hasta formas orgánicas complejas.

Cómo usar este generador de radio de borde

1. Elige un preset — Comienza con formas redondeadas, píldoras, blobs, hojas, gotas o morph.
2. Ajusta los deslizadores — Controla cada esquina de forma independiente o vínculalas entre sí.
3. Establece las dimensiones — Cambia el ancho y la altura para que coincidan con tu elemento.
4. Personaliza los colores — Establece el color del cuadro y el fondo de la vista previa.
5. Copia el CSS — Haz clic en el botón de copiar y pégalo en tu hoja de estilos.

Características clave

Característica	Beneficio
Control individual de esquinas	Establece cada esquina de forma independiente para formas únicas
Vincular/desvincular esquinas	Alterna entre esquinas uniformes y personalizadas
6 presets de forma	Comienza rápidamente con patrones comunes de border-radius
Controles de ancho y altura	Ajusta las dimensiones reales de tu elemento
Vista previa en vivo	Ve cómo cambia la forma instantáneamente al ajustar
Copiar al portapapeles	Exportación de CSS con un solo clic

Entendiendo el border-radius en CSS

La sintaxis

La propiedad border-radius acepta hasta cuatro valores, uno para cada esquina:

border-radius: top-left top-right bottom-right bottom-left;

Patrón de valor	Esquinas afectadas
16px	Todas las esquinas igualmente
16px 8px	Esquina superior izquierda + inferior derecha / superior derecha + inferior izquierda
16px 8px 4px	Esquina superior izquierda / superior derecha + inferior izquierda / inferior derecha
16px 8px 4px 2px	Cada esquina individualmente

Píxeles vs Porcentajes

• Píxeles (px): Radio de esquina fijo independientemente del tamaño del elemento.
• Porcentajes (%): Relativo a las dimensiones del elemento. 50% en un cuadrado crea un círculo perfecto; 50% en un rectángulo crea una elipse.

Usando porcentajes para círculos y píldoras

Un border-radius: 50% crea un círculo perfecto cuando el ancho es igual al alto. Para botones en forma de píldora, usa un valor grande en píxeles (como 999px) — esto garantiza que el radio siempre exceda la mitad de la dimensión más corta, creando extremos completamente redondeados independientemente del tamaño del elemento.

Comparación de presets de forma

Preset	Valores	Caso de uso
Redondeado	16px uniforme	Tarjetas, ventanas modales, imágenes
Píldora	999px uniforme	Botones, etiquetas, insignias
Blob	60px 40px 70px 30px	Elementos decorativos, secciones hero
Hoja	0 100px 0 100px	Elementos de UI orgánicos, divisores decorativos
Gotita	0 100px 100px 0	Tooltip, llamados a la atención, punteros
Morph	30px 70px 50px 80px	Formas abstractas, fondos

Casos de uso reales

Estilo de botones

Crea botones en forma de píldora con border-radius: 999px para un aspecto moderno y amigable usado por la mayoría de los sistemas de diseño.

Componentes de tarjetas

Un redondeo sutil (8–16px) suaviza los bordes de las tarjetas y crea una jerarquía visual sin ser distraer.

Avatares de perfil

Usa border-radius: 50% en imágenes cuadradas para crear avatares circulares, comunes en aplicaciones sociales y dashboards.

Blobs decorativos

Valores asimétricos en elementos de fondo grandes crean formas orgánicas trendy populares en el diseño web moderno.

Tooltip personalizados

Usa valores mixtos (ej. 8px 8px 8px 0) para crear un tooltip con una esquina afilada apuntando al elemento desencadenante.

Consejos para un mejor border-radius

Consejo	Explicación
Mantén la coherencia	Usa el mismo radio en todo tu sistema de diseño (ej. 8px para pequeño, 16px para grande).
Usa unidades relativas	Para círculos responsivos, usa 50% en lugar de un valor fijo en píxeles.
Valores grandes para píldoras	Usa 9999px o 999px para garantizar extremos completamente redondeados en cualquier elemento.
Desvincula para formas orgánicas	Esquinas asimétricas crean formas interesantes y únicas.
Presta atención al contenido	Asegúrate de que el texto y el contenido interno no se corten con un redondeo excesivo.
Combina con transformaciones	Gira o inclina elementos con radios personalizados para formas aún más creativas.

Preguntas frecuentes

¿Qué ocurre cuando border-radius es mayor que el elemento?

El navegador limita el valor a la mitad de la dimensión más corta. Así que un border-radius: 999px en un botón de 60px de alto se vuelve efectivamente 30px, creando una forma de píldora perfecta.

¿Puedo usar radios horizontales y verticales diferentes?

Sí. La sintaxis abreviada de border-radius admite un estilo alternativo: border-radius: 50px / 25px establece radios horizontales y verticales por separado, creando esquinas elípticas. Este generador se enfoca en radios uniformes por esquina.

¿Cómo creo un círculo?

Establece border-radius: 50% en un elemento cuadrado (ancho igual a alto). Si el elemento no es cuadrado, obtendrás una elipse.

¿El border-radius afecta el diseño?

No. border-radius solo afecta la representación visual y el recorte del elemento. No cambia el modelo de caja del elemento ni su diseño.

¿El generador funciona en navegadores antiguos?

Sí, aunque las versiones antiguas de navegadores pueden no soportar ciertas características avanzadas como bordes redondeados en esquinas individuales.