Generador de border-radius
CSS border-radius con control de cada esquina en píxeles o porcentaje, vista previa en vivo y código listo para copiar.
CSS generado
CSS
border-radius: 12px;
Cómo funciona
Este generador de border-radius te permite controlar cada esquina del CSS border-radius, en píxeles o porcentaje, con una vista previa en vivo y el código CSS exacto para copiar. Vincula las cuatro esquinas para un redondeo uniforme o desvincúlalas para dar forma a cada esquina de manera independiente.
- Elegir unidad
Píxeles para una curva fija o porcentaje para una curva que se ajusta al tamaño del elemento.
- Configurar cada esquina
Arrastra un control deslizante o escribe un número exacto. Desvincula para dar forma a las esquinas de manera independiente.
- Copia el CSS
La forma abreviada se simplifica automáticamente cuando las esquinas coinciden.
La forma abreviada de border-radius
La propiedad border-radius acepta hasta cuatro valores, siempre en este orden:
border-radius: top-left top-right bottom-right bottom-left;
Cuando las cuatro esquinas coinciden, los navegadores aceptan un solo valor. Cuando la esquina superior izquierda es igual a la inferior derecha y la superior derecha es igual a la inferior izquierda, dos valores son suficientes. Esta herramienta genera automáticamente la forma válida más corta.
Píxeles frente a porcentaje
- Píxeles: una curva fija que mantiene el mismo tamaño sin importar cómo se redimensione el elemento.
- Porcentaje: el radio horizontal es un porcentaje del ancho del elemento y el radio vertical es un porcentaje de su altura, por lo que la curva se escala con el cuadro. Con un 50 % en un elemento cuadrado, las cuatro esquinas se encuentran en el centro y la forma se convierte en un círculo.
Cuando los radios se superponen
Si los radios de dos esquinas que comparten un borde suman más que la longitud de ese borde, los navegadores reducen ambos proporcionalmente para que encajen exactamente. Esto es lo que convierte un radio grande en píxeles sobre un elemento corto y ancho en una forma de píldora completamente redondeada en cada extremo, sin necesidad de CSS adicional.
Compatibilidad con navegadores
border-radius, incluidos los valores porcentuales independientes por eje, funciona en todos los navegadores actuales. Los prefijos de proveedor de CSS3 más antiguos, como -webkit-border-radius, ya no son necesarios.
Preguntas frecuentes
¿Cómo configuro diferentes valores de border-radius para cada esquina en CSS?
La abreviatura border-radius acepta hasta cuatro valores en el orden superior izquierda, superior derecha, inferior derecha, inferior izquierda: border-radius: 12px 8px 20px 4px;. Desactiva Vincular todas las esquinas en esta herramienta, luego ajusta cada control deslizante o campo numérico individualmente y copia el CSS generado que utiliza la sintaxis completa de cuatro valores.
¿Cómo hago un círculo con border-radius en CSS?
Establece border-radius en 50 % en un elemento que tenga el mismo ancho y alto. El panel de valores predefinidos incluye una opción Círculo que establece las cuatro esquinas al 50 % y cuadra la vista previa para mostrarlo claramente. El CSS generado es simplemente border-radius: 50%; aplicado a un elemento de 100 por 100 píxeles, esto produce un círculo perfecto.
¿Cuál es la diferencia entre las unidades px y porcentaje para border-radius?
Los valores en píxeles crean una curva de esquina fija sin importar el tamaño del elemento, por lo que el redondeo se mantiene constante al cambiar el tamaño del cuadro. Los valores porcentuales son relativos al ancho y alto del propio elemento, así que el mismo porcentaje se ve diferente en un botón pequeño que en una tarjeta grande. Cambia entre unidades con la opción de px y porcentaje sobre los controles deslizantes.
¿Cómo funciona el botón de alternancia Vincular todas las esquinas?
Cuando Vincular todas las esquinas está activado, mover cualquier control deslizante actualiza las cuatro esquinas al mismo valor, lo cual es útil para un redondeo uniforme como en las esquinas de tarjetas. Desactívalo para controlar cada esquina de forma independiente. Aplicar un ajuste preestablecido siempre desactiva el vínculo después para que puedas ajustar el resultado.
¿Por qué un radio grande a veces parece más pequeño de lo esperado?
Cuando dos radios de esquinas adyacentes en el mismo borde suman más que la longitud de ese borde, los navegadores reducen ambos proporcionalmente para que las curvas se encuentren exactamente en el medio del borde. En un elemento ancho y bajo, esto es precisamente lo que crea una forma de píldora totalmente redondeada a partir de un valor común en píxeles, como demuestra el ajuste preestablecido Píldora en esta herramienta.