Acerca de esta herramienta
Este generador controla las esquinas en orden superior izquierda, superior derecha, inferior derecha e inferior izquierda. Al vincularlas, cambiar una actualiza las otras tres para crear rápidamente radios uniformes.
Cómo usarla
- Elige la unidad e introduce un valor no negativo para cada esquina.
- Activa «Vincular esquinas» si quieres radios uniformes.
- Observa los cambios de forma en la caja de muestra.
- Copia el CSS o restablece los parámetros para probar otras formas.
Ejemplos de uso
- 10, 20, 30, 40px representan cuatro radios independientes.
- Con 20px en las cuatro esquinas se obtiene border-radius: 20px.
- Si las esquinas superior izquierda e inferior derecha son 10px y las otras dos 20px, la abreviatura es 10px 20px.
border-radius: 10px 20px 30px 40px;
border-radius: 20px;Funcionamiento y explicación del CSS
Los cuatro valores de border-radius se leen en sentido horario desde la esquina superior izquierda. Cuatro valores iguales se reducen a uno; esquinas opuestas iguales, a dos. Otras combinaciones también admiten abreviaturas CSS. El navegador adapta radios excesivos al espacio disponible según las reglas de CSS.
Usos habituales
- Aplicar radios uniformes a tarjetas y botones.
- Crear contenedores decorativos con esquinas asimétricas.
- Aprender el orden y las reglas de abreviación de border-radius.
Privacidad
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
FAQ
¿Cuál es el orden de las cuatro esquinas?
Superior izquierda, superior derecha, inferior derecha e inferior izquierda, en sentido horario.
¿Qué hace «Vincular esquinas»?
Al activarlo, cambiar una esquina sincroniza ese valor con las otras tres.
¿Por qué la salida a veces contiene solo uno o dos valores?
Los radios iguales se pueden abreviar según CSS. La forma reducida produce el mismo resultado que los cuatro valores completos.
¿Por qué un radio muy grande no se muestra exactamente como se indica?
Si la suma de radios vecinos supera las dimensiones de la caja, el navegador escala todos los radios según CSS para evitar solapamientos.