Radio de borde - Trucos CSS | Almanaque CSS 2024

Puede dar a cualquier elemento "esquinas redondeadas" aplicando un border-radiusCSS. Solo notará si hay un cambio de color involucrado. Por ejemplo, si el elemento tiene un color de fondo o un borde diferente al del elemento, se acabó. Ejemplos sencillos:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Realmente ya no es necesario, pero para obtener el mejor soporte de navegador posible, puede prefijar -webkit-y -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Observe el orden de esas propiedades: los prefijos del proveedor se enumeran primero y la versión de "especificaciones" sin prefijo se enumera en último lugar. Esta es la forma correcta de hacerlo. El radio del borde es un ejemplo particularmente bueno de por qué lo hacemos de esa manera. En una versión de uso un poco más complicada border-radius(en la que se pasan dos valores en lugar de uno), el -webkit-prefijo del proveedor anterior haría algo completamente diferente a la versión de "especificaciones". Entonces, si copiamos / pegamos ciegamente los mismos valores en las tres propiedades, podríamos ver resultados diferentes en todos los navegadores. Obtenga más información sobre este escenario. Para lograr la mayor coherencia a largo plazo, es mejor enumerar la versión de "especificaciones" al final.

Es bastante realista en estos días eliminar los prefijos y simplemente usar border-radius, como se explica aquí.

Si el elemento tiene un fondo de imagen, se recortará en la esquina redondeada de forma natural:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

A veces puede ver una background-color"fuga" fuera de un borde cuando border-radiusestá presente. (ver). Para evitar esto, usa background-clip:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Con solo un valor, border-radiusserá igual en las cuatro esquinas de un elemento. Pero ese no tiene por qué ser el caso. Puede especificar cada esquina por separado si lo desea:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

También puede especificar dos o tres valores. MDN lo explica bien:

Si se establece un valor, este radio se aplica a las 4 esquinas .
Si dos se establecen los valores, la primera se aplica a top-lefty bottom-rightesquina, el segundo se aplica a top-righty bottom-leftesquina.
Cuatro valores se aplican a la top-left, top-right, bottom-right, bottom-leftesquina, en ese orden.
Tres valores: el segundo valor se aplica a top-righty también bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

También puede especificar los radios en los que se redondea la esquina. En otras palabras, el redondeo no tiene que ser perfectamente circular, puede ser elíptico. Esto se hace usando una barra (“/”) entre dos valores.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Nota: Firefox solo admite bordes elípticos en los navegadores WebKit 3.5+ y anteriores (por ejemplo, Safari 4) trata incorrectamente "40px 10px" como lo mismo que "40px / 10px".

Puede especificar el valor de border-radiusen porcentajes. Esto es particularmente útil cuando se desea crear un círculo o una elipse, pero se puede usar en cualquier momento que desee que el radio del borde se correlacione directamente con el ancho de los elementos.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Nota: En Safari, los valores porcentuales para el radio del borde solo se admiten en 5.1+. En Opera, solo es compatible con 11.5+.

Aquí está cada propiedad individual, con prefijos de proveedor:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Nota: Cada uno de esos valores también puede tener un valor separado por espacios, como “5px 10px”, que se comporta como un valor separado por barra en forma abreviada (radio horizontal (espacio) radio vertical).

Recursos

Herramienta rápida para generar código de radio de borde
Documentos de Mozilla
En busca del radio perfecto
¿Necesitamos prefijar border-radius?

Aquí hay una pequeña cosa para jugar con las diferentes propiedades y valores:

Vea el Pen All the border-radius 'de Chris Coyier (@chriscoyier) en CodePen.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.