Cómo utilizar la propiedad de radio de borde de CSS3

Con CSS3, puede dar "esquinas redondeadas" a cualquier elemento utilizando la border-radiuspropiedad. El valor puede estar en cualquier unidad de longitud CSS válida.

 .rounded-corners { border-radius: 20px; } .circle { border-radius: 50%; }
ejemplos

Nota: Laborder-radiuspropiedad es en realidad una propiedad resumida de losborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusyborder-bottom-left-radiuspropiedades.

Si solo se proporciona un valor, el radio del borde será el mismo para las cuatro esquinas, como en los ejemplos anteriores. Pero también tiene la opción de especificar diferentes valores para cada esquina.

.new-shape { border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */ }

Si solo se proporcionan dos valores, el primer valor se aplica a la esquina superior izquierda e inferior derecha, y el segundo valor se aplica a la esquina superior derecha e inferior izquierda.

.leaf-shape { border-radius: 0 50%; }

Si se establecen tres valores, el primero se aplica de nuevo al radio superior izquierdo, el segundo valor indica superior derecho e inferior izquierdo, dejando el tercer valor para indicar la esquina inferior derecha.

.odd-shape { border-radius: 0 20px 50%; }
ejemplos

El redondeo de una esquina no tiene por qué ser perfectamente simétrico. Puede especificar los radios horizontal y vertical usando una barra (”/”) para lograr una esquina con una forma elíptica.

.elliptical-1 { border-radius: 50px/10px; /* horizontal radius / vertical radius */ } .elliptical-2 { border-radius: 10px/50px; }
ejemplos

Dado que en los ejemplos anteriores solo se proporciona un par de valores, las cuatro esquinas son iguales. Pero, por supuesto, si desea una forma más compleja, puede proporcionar hasta cuatro valores para los radios horizontales y cuatro para los radios verticales.

.elliptical-3 { border-radius: 50px 20px 50px 20px/20px 50px 20px 50px; /* horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left */ }

Observe cómo la abreviatura anterior produce el mismo resultado que especificar propiedades individuales a continuación. Tenga en cuenta que cuando las esquinas se configuran individualmente, los valores están separados por espacios en lugar de separados por barras.

.elliptical-4 { border-top-left-radius: 50px 20px; /* horizontal radius, vertical radius */ border-top-right-radius: 20px 50px; border-bottom-right-radius: 50px 20px; border-bottom-left-radius: 20px 50px; }
ejemplos

Más información sobre la propiedad de radio de borde CSS:

  • Aprenda a usar la propiedad de radio de borde de CSS construyendo una calculadora