Club Desarrolladores

Navegación

Web social

Esquinas redondeadas (Round Corners) en todos los navegadores

Publicado por Gastón el 27/04/2009 en CSS - Nivel Intermedio

Tabla de contenidos

Logo de CSS

La tabla de contenidos pertenece al artículo completo y no al contenido parcial de cada página del mismo si fuese el caso.

Leer los comentarios.

Resúmen

Las esquinas redondeadas dan un mejor aspecto (según el caso) a un sitio web. Lograrlo utilizando solo CSS suele ser una tarea bastante ardua, sobre todo por las pobres, sino nulas, implementaciones de los diferentes navegadores actuales.
En este artículo se mostrarán las alternativas que estos navegadores hoy nos ofrecen a fin de lograr esquinas redondeadas (rounded corners).

Sobre el autor

Avatar de Gastón

Gastón tiene 32 años, vive en Argentina / Santa Fe / Santa Fe y su ocupación es Desarrollador de aplicaciones web.

Forma parte del club desde 19/10/2009 a las 20:52 habiendo estado en linea 25/03/2013 a las 18:54 por última vez.

Ha publicado 54 artículos en clubdesarrolladores con un promedio de valoración de 7.97 puntos. Puedes visitar su sitio web en http://devstudios.clubdesarrolladores.com

Estadísticas

  • Leido 78604 veces
  • Valorado 9.00 puntos

Los diferentes navegadores nos ofrecen implementaciones propias, fuera de cualquier estandar, con la promesa de, en poco tiempo, implementar el standart que recomienda el w3c.

Propiedad CSS3 Estandar

Esta es la propiedad que todos los navegadores deberian implementar, sin embargo eso no sucede. Es bueno colocarla desde ya.

.rounded-corners

{

border-radius: 10px;

}



Esta propiedad puede descomponerse de la siguiente manera:

.rounded-corners

{

border-top-right-radius = 10px;

border-bottom-right-radius = 10px;

border-bottom-left-radius = 10px;

border-top-left-radius = 10px;

}



Las siguientes propiedades solo serán interpretadas por los navegadores correspondientes.

Firefox

Firefox desde hace ya un tiempo (desde la versión 1.5 en adelante) dispone de esta propiedad para esquinas redondeadas. Las propiedades que solo funcionan en Firefox comienzan con -moz.

.rounded-corners

{

-moz-border-radius: 10px;

}



Y descompuesta:

.rounded-corners

{

-moz-border-radius-topright = 10px;

-moz-border-radius-bottomright = 10px;

-moz-border-radius-bottomleft = 10px;

-moz-border-radius-topleft = 10px;

}



Internet Explorer

Solo Internet Explorer 8 (modo IE=8) podrá reconocer esta sintaxis.

.rounded-corners

{

-ms-border-radius: 10px;

}



y sus componentes:

.rounded-corners

{

-ms-border-radius-topleft: 10px;

-ms-border-radius-topright: 10px;

-ms-border-radius-bottomleft: 10px;

-ms-border-radius-bottomright: 10px;

}



Más información sobre IE y CSS.

WebKit y Safari

Estos son navegadores novedosos, y esta es su propuesta:

.rounded-corners

{

-webkit-border-radius: 10px;

}



En partes:

.rounded-corners

{

-webkit-border-top-right-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-top-left-radius: 10px;

}



Konqueror

Hasta konqueror nos ofrece soluciones:

.rounded-corners

{

-khtml-border-radius: 10px;

}



y...

.rounded-corners

{

-khtml-border-radius-topleft:10px;

-khtml-border-radius-topright:10px;

-khtml-border-radius-bottomleft:10px;

-khtml-border-radius-bottomright:10px;

}



Opera

Opera ha sido una desilusión, no presenta nada similar a los demás navegadores. Pero al tener soporte de SVG podemos hacer algo asi (esta solución funciona con Safari y Firefox también):

.rounded-corners

{

background: silver url("images/roundedcorners.svg");

}



Y el SVG:

  <rect fill="white"  x="0" y="0" width="100%" height="100%" />

  <rect fill="silver"  x="0" y="0" width="100%" height="100%" rx="10px"/>



Los navegadores que no soporten SVG, ignorarán la declaración anterior.

Clase CSS para esquinas redondeadas

Hoy día, necesitamos colocar todas, aunque esto haga que el validador de CSS falle.

.rounded-corners

{

border-radius: 10px;

-ms-border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

}



Actualmente demasiado código para algo que una sola propiedad (la primera) deberia definir.
Y recuerden que podemos hacer cosas asi:

.rounded-corners

{

border-radius: 10px 0 2em 4pt;

-ms-border-radius: 10px 0 2em 4pt;

-moz-border-radius: 10px 0 2em 4pt;

-webkit-border-radius: 10px 0 2em 4pt;

-khtml-border-radius: 10px 0 2em 4pt;

}



Por lo que nuestro CSS engordará bastante y quedará muy poco legible... es lo que hay hoy día.

Existen otras soluciones utilizando imágenes extra, marcado (x)html adicional, javascript... la idea de este artículo es la de utilizar solo CSS, para que cuando tengamos que sonreir recordando el pasado (los navegadores implementaron border-radius...) solo debamos modificar el archivo CSS y nada más.

Les agrego una aplicación online que genera el código necesario para crear cajas con bordes redondeados.

Si tiene alguna pregunta sobre éste artículo por favor deje un comentario y será respondido.

Descargas

El artículo no tiene descargas asociadas

Listado de comentarios

Sus comentarios son importantes.

Avatar de Damaso Perez

mmm, ami no me funciono este codigo, talves estoy haciendo algo mal, pero pues no se que es lo unico que hago es agregarle la regla css creada a un div, pero no me hace nada. ojala me puedas ayudar a entender bien como hacerlo. hasta luego.

Damaso Perez (17/01/2010)
Avatar de Damaso Perez

Ya me salio!!!!!!!!!!!! yuuujuuu, pero ahora no se como se crea, se enlazan los archivos SVG para que tambien funcione en opera. si pudieras postear algo te lo agradeceria . hasta luego

Damaso Perez (24/01/2010)
Avatar de Gastón Autor

El archivo SVG es un simple XML con extensión SVG, contiene el código que indica el artículo. Luego lo especificas en el css como haces con cualquier imágen de fondo.

Gastón (24/01/2010)
Avatar de Valerio Vergini

Buenas noche empece hace un mes a programar, hice mucho trabajo solo, ahora tengo problemas con nifty round corne.
1- quando pongo una imagen de fondo en el desktop, el triangolo que queda fuera da la curva queda balnco, quando no hay imagen de fondo al rededor de la curva se ve el color de fondo configurado y funciona bien en mozzilla y IE 6.0.
2- Supongamos que no tengo imagen de fondo (problema que me gustaria solucionar) pongo mi web on line y las curvas desaparecen.
3- si tengo un sitio de 20 pagina y tengo por ejemplo en todas 20 la misma seccion que quiero cambiar, hay una manera para referirme a un modulo y cambiarlo en las 20 a lavez ? podeis indicarme el camino ?
Gracias por el momento ...
un saludo

Valerio Vergini (14/02/2010)
Avatar de mariano

Hola, estoy intentando aplicar el codigo a un div pero no puedo, se me hace que algo mal estoy haciendo..

Damaso, vos que pudiste..podrías decirme cómo?

mariano (23/02/2010)
Avatar de Gastón Autor

Mariano no te olvides de darle un color de fondo o un borde al menos a la div.
Por otro lado en internet explorer parece no funcionar.

Gastón (05/03/2010)
Avatar de Ulises Tirado

A partir Opera 9.x (aprox) soporta CSS 3. =)

Ulises Tirado (14/09/2010)
Avatar de Mauricio José Tobares

PERFECTO!! no me lo acordaba... y bueno, con lo de esperar que la historia nos de la razon que estandarizar no siempre es malo viene de la manito de la ventana que hasta que todos los otros no hacen algo ellos tampoco pero en fin... ¿quien no renego con el navegador de la ventana alguna vez? jeje y en estas cosas pfffff y ni que hablar con los nuevos html5 y css3 ahi nos vamos a volver mas locos de lo que ya estabamos :(

Mauricio José Tobares (09/08/2011)
Avatar de gabriel Rodriguez

Hola Gaston, gracias por el post. He probado el código y he tenido problemas para que funcione bien en ie8, nuevamente gracias por tu ayuda!

gabriel Rodriguez (08/02/2012)
Avatar de Gastón Autor

@Gabriel las propiedades -ms-* estaban en un borrador de microsoft, lamentablemente no están todas implementadas ie8.
Consultando con amigos maquetadores me dicen que la mejor solución sigue siendo una hoja de estilo separada y utilizar, imágenes de fondo o bien javascript.

Saludos.

Gastón (10/02/2012)

Agregar un comentario

Debe estar identificado para agregar un comentario