Una de las novedades más solicitadas y esperadas son las cajas redondeadas, lamentablemente no todos los navegadores han incorporado esta norma de Border-Radius, de hecho hay ciertas especificaciones según el motor del explorador.

 

Veamos que debemos utilizar según cada motor del explorador una norma distinta dentro de la norma CSS 2.1:

 

Mozilla (Firefox, Mozilla, Flock, Maxthon, K-Meleon)

Identificador principal -moz-border-radius

Selector adicional opcional: top, bottom, left, right, topleft, topright, bottomleft, bottomright

 

Ejemplos:

-moz-border-radius-topleft:5px;

-moz-border-radius-bottomright:5pex;

 

 

WebKit (Google Chrome, Safari)

Identificador principal -webkit-border-radius

Selector adicional debe ser incluido entre BORDER y RADIUS (no al final como Mozilla): top, bottom, left, right

 

Ejemplos:

 -webkit-border-top-left-radius:3ex;

 -webkit-border-bottom-right-radius:3ex;

 

 

Trident (Internet Explorer) y Presto (Opera)

Actualmente ambos navegadores no disponen de este elemento CSS3, por lo que debemos utilizar una librería de javascript alternativa.

La recomendación es integrar jQuery 1.3.2 y CurvyCorners 2.0 ya que resuelven de una forma muy eficaz este tema y no necesitamos escribir javascript adicional al CSS definido.

 

Para la norma CSS3 usaremos la nomenclatura de Webkit eliminando -webkit- en el prefijo.