Como crear bordes redondeados con CSS3

css3Las 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;
}


untitled



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.

Como crear bordes redondeados con CSS3 Como crear bordes redondeados con CSS3 Reviewed by Marcos Rivas on martes, octubre 12, 2010 Rating: 5