Generador de border-radius CSS
Genera border-radius CSS con esquinas independientes, radios elípticos X/Y, unidades px o % y formas de mancha predefinidas. Produce la forma abreviada válida más corta.
Ajustes predefinidos
Esquinas
Ajustes de la vista previa
Vista previa
border-radius: 16px;
Herramientas Relacionadas
Ver Todas¿Qué es Generador de border-radius?
Ajusta el radio de cada esquina por separado, opcionalmente con radios horizontal y vertical distintos para esquinas elípticas, en px o %. La herramienta previsualiza la forma y escribe la forma abreviada de border-radius equivalente más corta.
Cómo usar Generador de border-radius
- Elige un ajuste predefinido (Redondeado, Píldora, Círculo, Mancha, Hoja, Entrada) o define tú los valores.
- Elige la Unidad (px o %) y activa Esquinas elípticas si quieres radios X/Y por separado.
- Ajusta cada esquina (Superior izquierda, Superior derecha, Inferior derecha, Inferior izquierda); marca Vincular todas las esquinas para cambiarlas a la vez.
- Cambia el ancho, el alto y el color en Ajustes de la vista previa para ver la forma a tu tamaño.
- Copia el código CSS.
Ejemplo
Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Cuándo usar Generador de border-radius
Úsalo para tarjetas redondeadas, píldoras, avatares y formas orgánicas de mancha hechas solo con CSS. Los porcentajes escalan con el elemento (50 % en un cuadrado da un círculo). Para polígonos arbitrarios o formas con cortes rectos usa el Generador de clip-path; para formas orgánicas complejas con muchos puntos usa el Generador de blobs SVG.
Cómo funciona Generador de border-radius
Las esquinas se ordenan superior izquierda, superior derecha, inferior derecha, inferior izquierda, como exige CSS. Cada grupo de cuatro valores se acorta con las reglas estándar de la forma abreviada: el cuarto valor se omite si es igual al segundo, el tercero si es igual al primero y el segundo si es igual al primero. Con esquinas elípticas, los radios verticales van tras una barra (h / v); la parte tras la barra se omite cuando cada radio vertical es igual a su radio horizontal.
Casos de Uso Comunes
- Botones y etiquetas en forma de píldora
- Avatares circulares
- Imágenes con forma de mancha orgánica con radios elípticos de 8 valores
- Tarjetas con forma de entrada o de hoja
- Esquinas asimétricas de bocadillo
Preguntas Frecuentes
¿Qué significa la barra en border-radius?
Los valores antes de la barra son radios horizontales y los de después son radios verticales, lo que produce esquinas elípticas.
¿Por qué 999px da forma de píldora?
Cuando los radios son más grandes que la caja, los navegadores los reducen todos proporcionalmente, así que un valor enorme siempre da extremos perfectamente redondos.
¿Debo usar px o %?
px mantiene la misma curva a cualquier tamaño; % es relativo al ancho (horizontal) y al alto (vertical) del elemento, que es lo que quieres para círculos y manchas.