Generador de CSS Border Radius

Los píxeles dan un tamaño de curva fijo independientemente del tamaño del elemento. Los porcentajes escalan en relación con las dimensiones del elemento: "50%" en un cuadrado de 100px da un radio de 50px. Usa px para botones y tarjetas con un redondeo consistente. Usa % para formas que deban escalar proporcionalmente, como círculos o botones en forma de pastilla.

Desvincula las esquinas con el interruptor de vinculación y ajusta el deslizador de cada esquina por separado. La forma abreviada en CSS para cuatro valores es: border-radius: superior-izquierda superior-derecha inferior-derecha inferior-izquierda (en sentido horario desde la esquina superior izquierda).

Un único valor: "border-radius: 16px". Cuando los pares superior-izquierda/inferior-derecha y superior-derecha/inferior-izquierda son iguales: "border-radius: 10px 20px". La herramienta siempre genera la forma abreviada más concisa.

La forma de pastilla tiene los extremos completamente redondeados en un elemento rectangular. Establece un border-radius muy grande (normalmente "9999px" o "50%"). El navegador limita el radio a la mitad de la dimensión más corta, creando semicírculos en cada extremo. Usa el predefinido Pastilla de esta herramienta.

La herramienta admite px y % como opciones de unidad. Si necesitas em o rem, anota el valor en píxeles y conviértelo manualmente. La propiedad border-radius acepta cualquier unidad de longitud CSS válida (px, em, rem, %, etc.).

Sí. border-radius recorta toda la caja, incluidas las imágenes de fondo. Si los elementos hijos desbordan las esquinas redondeadas, añade "overflow: hidden" para recortarlos. El redondeo se aplica de forma uniforme al fondo, al borde y al box-shadow.

No. Todo se ejecuta en tu navegador mediante JavaScript. Nada sale de tu dispositivo.