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.
Soy
August 22nd, 2009 at 3:26 pm
Porque me sale la anotación vacia? No puedo ver nada del artículo (uso Firefox 3.5 en Ubuntu 9.10)
August 22nd, 2009 at 6:06 pm
Cuando entro a leer algo de esta web nunca puedo ver el contenido.
No entiendo lo que pasa.
August 24th, 2009 at 1:38 am
Yo también uso Firefox 3.5 pero desde windows, aparentemente es un problema del navegador ???
Si examinas el fuente de la página si está el contenido del artículo.
September 3rd, 2009 at 4:05 am
Porque me sale la anotación vacia? No puedo ver nada del artículo (uso Firefox 3.5 en Ubuntu 9.10);…
September 3rd, 2009 at 7:38 am
Hoy en la madrugada eh realizado el cambio de servidor de archivos por estas razones, el problema era de parte de mi antiguo servidor de base de datos, pero ahora todos los podrán ver sin ningún problema.
Saludos.
September 21st, 2009 at 1:25 pm
muy bien, funciona excelente lo de los bordes redondos en CSS3
October 13th, 2009 at 9:21 pm
NO me sirve en IEexplorer 7!!!!!!!!!! gracias!!!