Bordes redondeados con CSS3

Una vez más los navegadores web modernos basados en motores como Gecko (Firefox) y Webkit (Safari y Google Chrome) se han vestido de gala. Vean el ejemplo

Con las siguientes nuevas reglas de estilo incluídas en CSS3 podemos crear bordes redondeados para nuestros tags en XHTML. Todo sin usar algún tipo de "truco" complejo o librería de Javascript dedicada exclusivamente a ello.

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-right-radius: 10px;
}

Sin duda es una de las características mas adorables al momento de diseñar, y que por si fuera poco es un estándar bien aceptado por la W3C.

Quizá también te pueda interesar revisar este plugin para jQuery que lograra el mismo efecto de arriba, solo que también para Internet Explorer 6 y posteriores. Así como también este otro Tip de Darel relacionado.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.