Bordes redondeados CSS3 para todos los navegadores

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.

También te puede interesar

10 Comments

  1. shakaran
    ago 22, 2009 @ 15:26:43

    Porque me sale la anotación vacia? No puedo ver nada del artículo (uso Firefox 3.5 en Ubuntu 9.10)

  2. Hansy
    ago 22, 2009 @ 18:06:53

    Cuando entro a leer algo de esta web nunca puedo ver el contenido.

    No entiendo lo que pasa.

  3. Hansy
    ago 24, 2009 @ 01:38:14

    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.

  4. Aiporlani
    sep 03, 2009 @ 04:05:45

    Porque me sale la anotación vacia? No puedo ver nada del artículo (uso Firefox 3.5 en Ubuntu 9.10);…

    • craftyman
      sep 03, 2009 @ 07:38:35

      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.

  5. Martin Beas Nunez
    sep 21, 2009 @ 13:25:07

    muy bien, funciona excelente lo de los bordes redondos en CSS3

  6. carlos
    oct 13, 2009 @ 21:21:45

    NO me sirve en IEexplorer 7!!!!!!!!!! gracias!!!

  7. Jean Benitez
    ene 04, 2011 @ 11:32:07

    y con esta propiedad se puede especificar los lados a los que se le quiera dar el borde? no hay ningun problema?

    por ejemplo:
    -moz-border-radius-bottomleft:5px;

    hacer algo asi con las otras propiedades, no tiene ningun problema?

    saludos, buen post x)

  8. hans
    ago 29, 2011 @ 00:22:10

    Muchas gracias por este codigo, realmente me sirvio tanto para firefox como IE, graciasss

  9. Mariano
    oct 14, 2011 @ 17:07:42

    En mi navegador OPERA 11.50 no se ven los bordes redondeados. Acabo de instalar esta versión de Opera, por que lei que desde el 10.50 ya acepta Border Radius, aunque a mi NO ME FUNCIONAN!

    En Opera sigo viendo los bordes cuadrados, y me seria de urgencia una respuesta ya que lo necesito para un sitio que estoy haciendo. Saludos amigos a todos