Generador de esquinas redondeadas y formas
Ajusta los radios horizontales y verticales de las cuatro esquinas en px o % y previsualiza la forma. Copia o guarda el CSS border-radius generado. El ancho, el alto y el color de la vista previa no se incluyen en el CSS.
Lo que puedes hacer
Ajusta el redondeo a partir de un preajuste
Elige entre 8 preajustes, como esquinas redondeadas, cápsula y hoja, y ajusta los radios. Al elegir un preajuste se sustituyen los radios y la unidad.
Da a cada una de las cuatro esquinas un redondeo distinto
Desactiva el ajuste de radio único para introducir por separado los radios horizontal y vertical de las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda.
Revisa y obtén el CSS
Genera el CSS después de revisar la forma. Cambia entre la forma abreviada y las declaraciones por esquina, y luego cópialo o guárdalo como archivo CSS.
Cómo se usa
Elige un preajuste y una unidad
Introduce los radios directamente o elige un preajuste para empezar a ajustar. Cambiar la unidad no convierte los números.
Compara el redondeo y la forma
Introduce un valor para usar el mismo radio. Para variarlo por esquina, desmarca la opción y ajusta los valores horizontal y vertical.
Comprueba el tamaño si lo necesitas
En los ajustes de vista previa puedes cambiar la anchura, la altura y el color de comprobación. No se incluyen en el CSS de salida.
Genera el CSS y cópialo o guárdalo
Pulsa «Generar CSS» y elige el formato que quieras. Si cambias los radios, la unidad o el tamaño, vuelve a generarlo.
Útil cuando
Dar forma a las esquinas de tarjetas y botones
Cuando quieras crear CSS para componentes de página redondeando las cuatro esquinas por igual o solo las superiores.
Crear un fondo redondeado asimétrico
Cuando quieras cambiar el redondeo horizontal y vertical por esquina para crear contornos que recuerden a hojas o formas orgánicas.
Relación entre radios, unidades y tamaño de visualización
Horizontal y vertical son las dos direcciones de una misma esquina
El radio horizontal controla el redondeo horizontal y el vertical, el vertical. Una esquina no se redondea si alguno de los dos valores es 0. Indica las cuatro esquinas en sentido horario desde la superior izquierda.
% usa la anchura y la altura como referencias distintas
Los valores % horizontales toman como referencia la anchura del elemento y los verticales, su altura. Aunque los números sean iguales, un cuadrado y un rectángulo alto o ancho se ven distintos. px especifica la longitud directamente.
Los radios demasiado grandes se reducen en la misma proporción
Si la suma de radios adyacentes supera la longitud del lado, los 8 radios de visualización se reducen con un factor común. Los valores introducidos y el CSS generado no cambian. En los detalles posteriores a la generación puedes consultar los radios usados en la vista previa.
El alcance de los contornos que se pueden expresar con esquinas redondeadas
border-radius convierte las esquinas en curvas elípticas. No puede crear hendiduras ni polígonos arbitrarios. El preajuste squircle aproxima la forma con esquinas elípticas; no reproduce la curva matemática exacta.
Preguntas frecuentes
¿Puedo dar un redondeo distinto a cada esquina?
Sí. Desmarca «Usar el mismo radio en todas las esquinas» para introducir por separado el radio horizontal y el vertical de cada esquina. Si vuelves a marcarla, todos los radios se igualan al radio horizontal de la esquina superior izquierda.
¿Se convierten los números al cambiar de unidad?
No. Se conservan los números y solo cambia la unidad. Si al pasar de px a % queda algún valor superior a 100, vuelve a introducirlo dentro del rango de 0 a 100.
¿El tamaño y el color de la vista previa se incluyen en el CSS?
No. La salida contiene solo las declaraciones de border-radius. Establece la anchura, la altura y el color de fondo en la página o el componente donde lo uses.
¿Por qué la forma mostrada tiene las esquinas menos redondeadas que los radios que introduje?
El navegador reduce los radios mostrados en la misma proporción para evitar que las curvas de las esquinas se solapen. Puedes consultar el factor de reducción y los valores en px de cada esquina en «Radios usados para la visualización».
Entrada y resultados
- Radios
- Indica los 8 valores en la misma unidad: 0–100 % o 0–9999 px. También se admiten valores decimales.
- Vista previa
- La anchura y la altura de la vista previa son números enteros de 1–400 px. La anchura que no cabe se puede desplazar horizontalmente dentro del campo.
- Salida
- La forma abreviada de border-radius o las declaraciones para cada una de las 4 esquinas. Cópialo o guarda border-radius.css.
- No incluye
- Anchura, altura, color de fondo y exportación de imagen o SVG.