Generador de Border Radius CSS
Vista previa del radio del borde
Código CSS
.element {
border-radius: 20px;
}
? Preguntas Frecuentes
¿Cómo funciona border-radius?
El radio del borde redondea las esquinas del elemento. Los valores pueden ser píxeles, porcentajes o ems. Puedes especificar todas las esquinas a la vez (radio del borde: 10 px) o cada esquina individualmente (superior izquierda, superior derecha, inferior derecha, inferior izquierda).
¿Puedo crear esquinas redondeadas elípticas?
¡Sí! Usa dos valores separados por una barra diagonal: border-radius: 50px / 25px. El primer valor es el radio horizontal y el segundo, el vertical, creando curvas elípticas en lugar de circulares.
¿Cómo hago un círculo perfecto?
Establezca el radio del borde al 50 % en un elemento cuadrado. El porcentaje es relativo a las dimensiones del elemento; por lo tanto, el 50 % en un cuadrado crea un círculo. Para rectángulos, utilice un valor de píxel alto.
¿Puede cada esquina tener diferentes valores de radio?
¡Por supuesto! Puedes especificar valores diferentes para cada esquina: border-radius: 10px, 20px, 30px, 40px (arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda) o usar propiedades individuales como border-top-left-radius.
¿Funciona con borde y relleno?
Sí, border-radius interactúa con los bordes y el relleno. El borde exterior sigue el borde, mientras que el interior se ajusta al relleno. La vista previa visual te ayuda a ver cómo se combinan estas propiedades.
¿Mis datos están seguros y protegidos?
¡Sí, por supuesto! Esta herramienta se ejecuta completamente en tu navegador. Todo el procesamiento de datos se realiza localmente en tu dispositivo; nada se sube a nuestros servidores. Tus archivos y datos nunca salen de tu ordenador, lo que garantiza total privacidad y seguridad.