Antes de CSS3, teníamos que utilizar imagenes para obtener un efecto de bordes redondos al momento de aplicar un diseño. Gracias a CSS3 esta practica ha quedado en el pasado, ahora podemos utilizar la propiedad border-radius para obtener este efecto.
Esta propiedad no se maneja de la misma manera en todos los navegadores, Internet Explorer no la interpreta en sus versiones 7 y 8, solo en su versión 9. Por otro lado, Safari y Chrome la reconocen si utilizas el prefijo -webkit-, en el caso de Firefox se debe utilizar el prefijo -moz-.
Veamos un pequeño ejemplo, si tenemos un DIV con un width de 200px, un height de 200px y un background negro y queremos que tenga los bordes redondos con un radio de 10px, el código CSS que debemos aplicar sería así:
div.cuadrado {
width: 200px;
height: 200px;
background-color: black;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari y Chrome */
border-radius: 10px;
}
El resultado que obtendríamos sería algo como esto:
La propiedad border-radius tiene el siguiente orden: top-left, top-right, bottom-right, bottom-left.
En este sentido, border-radius: 10px; es equivalente a:
border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;
Teniendo en cuenta este orden, podemos redondear algunas esquinas y otras no. Por ejemplo, si queremos que solo la esquina superior derecha sea redonda, sería algo así:
div.cuadrado {
width: 200px;
height: 200px;
background-color: black;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
El resultado sería algo como esto:
Se le puede sacar mucho provecho a esta propiedad, todo dependerá de la creatividad de cada quien. Lo que si hay que tener bien claro, es que con esta propiedad nos ahorramos el utilizar esas incomodas imágenes en los bordes de los elementos.
