Bordes redondeados en CSS para Firefox y Safari

Bordes CSS para Firefox Hasta que llegue el estándar CSS 3 los usuarios de Firefox y Safari tenemos una sencilla alternativa para crear bordes redondeados sin necesidad de usar gráficos. Para los que sepáis ya algo de CSS 3 sabréis que los bordes redondeados se implementarán a través del elemento Border-Radius. Firefox y Safari usan su propia implementación a través de los prefijos moz y webkit, así que lo único que tenemos que hacer es declararlos en nuestro fichero CSS y listo. Esta es la lista con las sintaxis a seguir para realizar la implementación:

CSS 3:
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

Mozilla (Firefox, Netscape, etc.):
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Safari:
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

Analizando esta técnica tenemos las siguientes conclusiones en cuanto a su uso:

No existe ninguna repercusión negativa en otros navegadores de internet siendo la única diferencia la visualización de los bordes.
Un gran porcentaje de usuarios podrán disfrutar de un mejor diseño al darnos mayor flexibilidad para crear plantillas más atractivas.
Todo se implementa de manera sencilla desde el fichero CSS sin necesidad de añadir nuevos DIV en la plantilla como suele hacerse con otros métodos.
Cuando se implemente el nuevo estándar CSS 3 la migración se limitará a la actualización del fichero CSS.
La velocidad de carga de la página no se verá afectada ya que el motor Gecko del navegador se encarga de todo.
El fichero CSS dejará de validar correctamente bajo el estándar de la propuesta por WC3. Técnicamente esto no es un problema ya que la página seguirá funcionando perfectamente y no romperá la validación de XHTML. Los navegadores que no entienden este elemento simplemente lo ignoran.

El siguiente conjunto de ejemplos es en realidad una imagen capturada en Firefox para permitir a otros navegadores que no tienen esta funcionalidad poder ver el resultado:

Ejemplos de Bordes Redondeados