CSS: Esquinas redondeadas y sin imágenes (todos los navegadores)

Ésta es una cuestión muy hablada y discutida en foros y blogs. Existen infinidad de formas de poner bordes redondeados a elementos como las capas, aunque algunas no funcionan en todos los navegadores (no son Cross-browser) o no son óptimas (utilizan imágenes o demasiados div). Por eso quiero mostrar la que me ha parecido la más conveniente de todas las que habitan en la web.

Lo que tenemos que hacer es añadir el estilo siguiente a nuestra hoja CSS. Como vemos, en él se llama a varias propiedades, propias de cada navegador para conseguir que funcione en todos:

.redondeado {
behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari y Chrome */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 10.50, IE y CSS3 */
}

Además, se referencia a un script llamado border-radius.htc , que da soporte a los navegadores IE, en sus versiones 6, 7 y 8. Debemos descargarlo de http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc y guardardo en la misma ruta donde están nuestras páginas (no donde está el archivo CSS).

Bonus Track

También podemos añadir sombra al elemento y que funcione en todos los navegadores de esta forma:

  -moz-box-shadow: rgba(0,0,0,0.2) 0px 4px 2px;
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 4px 2px;
  -khtml-box-shadow: rgba(0,0,0,0.2) 0px 4px 2px;
  box-shadow: rgba(0,0,0,0.2) 1px 4px 10px;

Las propiedades por orden son: color, posición horizontal de la sombra, posición vertical de la sombra, distancia de desenfoque. Más información aquí: http://www.w3schools.com/cssref/css3_pr_box-shadow.aspf

 

Fuentes

• http://graphicmaniacs.com/note/cross-browser-border-radius-solution-with-example/
• http://code.google.com/p/curved-corner/
• http://www.w3schools.com/cssref/css3_pr_box-shadow.aspf
• http://jonraasch.com/blog/css-rounded-corners-in-all-browsers 

Espero que os sirva.