Las maravillas del CSS3 es que podemos igualar efectos que antes sólo podíamos con mucho conocimiento, habilidad y unas cuantas imágenes bien diseñadas para hacer redondo un elemento, por ejemplo. Y justamente es lo que vamos a ver en este tutorial, a crear bordes redondeados con CSS3 sin la necesidad de nada más que el uso de hojas de estilo. Sin embargo aunque ya Internet Explorer 9 soporta css3 no he encontrado la forma de obtener el código para que me aparezca el borde redondeado, por lo que abarcaré por el momento la solución para Firefox, Chrome y Safari.
Este es el código que deberá estar incluído en tu archivo CSS para que funcione apropiadamente en Firefox 3 y posteriores:
Código :
#ejemplo
{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
Por otro lado, este es el encargado de lograr el mismo efecto en iPhone, Safari y Chrome:
Código :
#ejemplo
{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-rightright-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;
}
para el ejemplo (cuando todos los bordes son del mismo radio) es mucho más óptimo utilizar la propiedad así:
Código :
-webkit-border-radius: 10px; //para navegadores basados en webkit -moz-border-radius: 10px; //para navegadores basados en gecko
Como ya lo mencioné, algo que no he descubierto bien es como poder usar la propiedad border-radius en Internet Explorer 9 pero prometo descubrirlo y traerles el código, pero mientras tanto ya saben como poder crear bordes redondeados con CSS3.
