Cómo se usa
- Elija la Unidad: px para un radio fijo, o % para un radio que sigue el tamaño de la caja.
- Escriba un radio para cada esquina en Superior izquierda, Superior derecha, Inferior derecha e Inferior izquierda. Una esquina con 0 es cuadrada.
- Marque Esquinas elípticas (un radio vertical aparte) si una esquina debe ser más ancha que alta, y escriba su radio vertical.
- Copie la declaración CSS y péguela en la regla de su elemento.
Cómo se escriben las cuatro esquinas
La propiedad border-radius admite de uno a cuatro radios horizontales, en el orden superior izquierda, superior derecha, inferior derecha e inferior izquierda. Una lista con menos valores repite los que tiene: con dos valores, el primero vale para las esquinas superior izquierda e inferior derecha, y el segundo para las esquinas superior derecha e inferior izquierda. Un radio vertical se escribe después de una barra, en el mismo orden.
La gramática está descrita en la especificación CSS Backgrounds and Borders (en inglés). Cada radio es una longitud o un porcentaje de la caja, y un radio de cero no necesita unidad.
border-radius: top-left top-right bottom-right bottom-left / vertical top-left vertical top-right vertical bottom-right vertical bottom-leftLa forma más corta
La herramienta omite todos los valores que la forma abreviada repetiría de todos modos. Si la esquina inferior izquierda es igual a la superior derecha, no se escribe; si la inferior derecha es igual a la superior izquierda, también se omite el tercer valor. Cuatro esquinas iguales se convierten en un solo valor, así que 12px 12px 12px 12px se escribe 12px.
La barra solo se escribe cuando un radio vertical es distinto de su radio horizontal. Sin esquinas elípticas, cada radio vertical es igual a su horizontal, así que no aparece ninguna barra.
Ejemplo resuelto: una tarjeta con esquinas elípticas
Ponga la esquina superior izquierda en 40 px por 20 px, la superior derecha en 20 px por 10 px, la inferior derecha en 40 px por 20 px y la inferior izquierda en 20 px por 10 px. Los radios horizontales son 40, 20, 40, 20, que la forma abreviada escribe como 40px 20px. Los radios verticales son 20, 10, 20, 10, que escribe como 20px 10px.
La declaración es border-radius: 40px 20px / 20px 10px;, y la vista previa muestra esquinas más anchas que altas.
Preguntas frecuentes
¿Por qué hay dos grupos de números separados por una barra?
El primer grupo da el radio horizontal de cada esquina, y el grupo que sigue a la barra da el radio vertical. Sin barra, una esquina es un arco de círculo con el mismo radio en las dos direcciones.
¿Qué hace un radio en porcentaje?
El porcentaje se toma del ancho de la caja para el radio horizontal, y de su alto para el radio vertical. Un 50 % en cada esquina da un círculo o una elipse, según la caja sea cuadrada o no.
¿Por qué el orden es superior izquierda, superior derecha, inferior derecha e inferior izquierda?
La forma abreviada sigue el sentido de las agujas del reloj que usan las demás propiedades de la caja, empezando por la esquina superior izquierda. Una vez conocido ese orden, las formas más cortas con dos o tres valores son fáciles de leer.
¿La herramienta comprueba el radio frente al tamaño de la caja?
No. Solo comprueba que cada radio sea un número igual o mayor que cero y que no supere el límite de 1000 px o 100 %. Si dos radios vecinos suman más que el lado de la caja, el navegador los reduce.
¿Se guarda o se envía algo de lo que escribe?
No. La vista previa y el CSS se generan en su navegador. No se guarda nada ni se envía a nuestro servidor, así que copie la declaración antes de salir de la página.
Fuentes
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.