Bordes redondeados CSS3 para todos los navegadores

10
106

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.

10 COMMENTS

  1. 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.

    • 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.

  2. 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)

  3. 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

Comments are closed.