Como crear bordes redondeados con CSS3

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.