CSS3 trajo consigo muchas propiedades buenas, una de las mas usadas es la de bordes redondeados mediante CSS y dejar de lado las imágenes que hacen que la pagina se vuelva mas pesada, pero esta propiedad no se ah llevado a la practica mediante este estándar de nombre “border-radius” ya que para cada tipo de navegador existe una propiedad.
Ejemplo de la propiedad border-radius
-moz-border-radius: 10px; /* Firefox*/ -ms-border-radius: 10px; /* IE 8.*/ -webkit-border-radius: 10px; /* Safari,Chrome.*/ border-radius: 10px; /* El estándar.*/
Un navegador que no soporta bordes redondeados podría ser IE6, sin duda este navegador sigue siendo favorito de algunas personas, para que los usuarios de IE6 puedan apreciar los bordes redondeados de una Web necesariamente tendríamos que poner un hack para este navegador.
CurvyCorners es un javascript que ejecuta rutinas dentro de la pagina buscando la propiedad de bordes redondeados ya sea para Firefox o Safari, y dándole la misma apariencia que en esos navegadores.
Lo único que tiene que hacer es incluir el .js en el de la pagina Web.
<script src="curvycorners.js" type="text/javascript"></script>
Luego creamos nuestra clase CSS:
.rCorners{
width: 220px;
padding: 10px;
background-color: #ECEFF5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
}
Dentro del crearemos un <div> para probar la función.
<div class="rCorners">
Bordes redondeados con CSS.
</div>
Así se vería en todos los navegadores:
Nota: Para IE6 hay otros hacks que podrías estar interesado, aquí dejo unos enlaces que tratan el tema de bordes redondeados.
Comentarios