Thader Consultores

Viernes, 29 de Julio de 2011 01:57

Esquinas redondeadas visibles en todos los navegadores

por  David Lozano
  • Imprimir
  • E-mail
  • Comentar

Algo que ha traído de cabeza a muchos desarrolladores web desde hace mucho tiempo ha sido poder tener esquinas redondeadas con una radio de curvatura desde CSS directamente, sin poner gráficos específicos. Así se puede conseguir un efecto de suavizado de las formas en los bordes de los elementos div de HTML de una forma simple y sencilla.

Actualmente, CSS 3 implementa la propiedad border-radius para definir esa esquina redondeada directamente. El modo de usarlo es bastante sencillo. En el div que queremos le aplicamos una clase, por ejemplo rounded. A continuación definimos en nuestro fichero CSS esa clase como:

 .rounded {
border-radius: 10px;
} 

 

De esta forma tenemos ese elemento div definido con un radio de curvatura en los bordes de las esquinas de 10 píxeles. Este radio se aplica a las 4 esquinas. Si queremos definir cada esquina por separado sólo hay que dividir ese parámetro:

 .rounded {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
} 

Ahora bien, el problema es que este parámetro es de CSS 3. No todos los navegadores soportan CSS 3, o no todas sus funcionalidades. Para el caso de border-radius, se soporta a partir de Firefox 4.0 o IE 9, por ejemplo. Para poder usar esta propiedad con navegadores anteriores, al menos Firefox y Chrome tienen extensiones específicas de CSS. Esto hace que el código CSS no valide el estándar, pero al menos funciona. Las extensiones para Firefox viene con el prefijo -moz, y las de Chrome con -webkit. Entonces, para tener un código CSS que funcione con navegadores modernos y Firefox y Chrome antiguos, podemos usar, siguiendo el código anterior:

 .rounded {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} 

Y ahora es cuando todos nos preguntamos: ¿y qué pasa con Internet Explorer anterior al 9? Pues bien, aquí está el mayor problema, ya que no hay solución usando CSS. IE 9 cumple con muchas características de CSS 3, pero no podemos decir lo mismo de sus predecesores, como muchos ya habréis tenido la desgracia de comprobar.

Para solucionar este problema con IE, tenemos que recurrir a otras soluciones. Una de ellas es usar un archivo .htc, si se quiere ampliar información de estos archivos podéis consultarlo en esta página de Microsoft. Para resolver nuestro problema, se puede descargar el archivo desde aquí. Ese archivo hay que subirlo al servidor donde esté alojada la página web, y el fichero CSS debemos dejarlo así:

 .rounded {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behaviour: url(border-radius.htc);
} 

De esta forma nos aseguramos que tengamos compatibilidad con la mayoría de los navegadores más usados en la actualidad.

Temas relacionados (por etiqueta)

Dejar comentario

Asegúrate de haber leído nuestra Política de privacidad antes de publicar cualquier comentario.

Los campos marcados con (*) son obligatorios.

Publicaciones del blog

No te pierdas las últimas publicaciones en el blog:

Thader Consultores

Thader Consultores