Esquinas Redondeadas en Todos los Navegadores con CSS

33_01

Con la utópica llegada de Internet Explorer 9 a CSS 3, alfín podemos hablar de esquinas redondeadas sin hacks ni imágenes más que simple y puro código CSS.

1. Redondear Todas las Esquinas
2. Redondear Esquinas Individuales
3. Efectos Avanzados

1. Redondear Todas las Esquinas

Esta es la forma más básica de todas, y muchas veces la única necesaria.

Rápidamente; cuando asignamos un tamaño -por ejemplo 20px- lo que pasa es que se toman 20 píxeles cuadrados para crear la curva, por lo tanto si nuestro objeto tuviera menos de 20 píxeles se crearía una curva del máximo tamaño posible dentro de sus límites pero no del valor asignado.

33_02

.radius { 
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Google Chrome y Safari */
border-radius: 20px; /* CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores) */
}

2. Redondear Esquinas Individuales

¿Sólo quieres redondear cierta esquina?

33_03

.radius { 
/* Firefox */
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 0px;

/* Google Chrome y Safari */
-webkit-border-top-left-radius: 40px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 40px;
-webkit-border-bottom-left-radius: 0px;

/* CSS3 (Opera 10.5 e Internet Explorer 9) */
border-top-left-radius: 40px;
border-top-right-radius: 0px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 0px;
}

¡Tranquilo, no te asustes! Si no te gusto el tremendo código de arriba (a mi tampoco XD) hay una forma de resumirlo en tan sólo 3 líneas:

/* Orden: Superior Izquierda, Superior Derecha, Inferior Derecha, Inferior Izquierda. */

.radius {
-moz-border-radius: 40px 0px 40px 0px; /* Firefox */
-webkit-border-radius: 40px 0px 40px 0px; /* Google Chrome y Safari */
border-radius: 40px 0px 40px 0px; /* CSS3 (Opera 10.5 e Internet Explorer 9) */
}

¿Todavía te parece muy largo? Valla, por suerte podemos resumir el código todavía más y lo logramos obviando valores.

Si obviamos el cuarto valor (inferior izquierda) es reemplazado por el segundo y si obviamos el tercer valor (inferior derecha) es reemplazado por el primero. Por ejemplo el mismo ejemplo de arriba más resumido sería:

.radius {
-moz-border-radius: 40px 0px; /* Firefox */
-webkit-border-radius: 40px 0px; /* Google Chrome y Safari */
border-radius: 40px 0px; /* CSS3 (Opera 10.5 e Internet Explorer 9) */
}

3. Efectos Avanzados

Para lograr estos efectos nos vamos a basar en la posibilidad de darle un valor a X y otro a Y creando un elipse.
Esto es soportado por todos los navegadores mencionados al principio, pero en Firefox es soportado desde la versión 3.5+.

33_04

/* Orden: X, Y */

.radius { 
-moz-border-radius: 40px / 20px; /* Firefox 3.5 */
-webkit-border-radius: 40px 20px; /* Google Chrome y Safari */
border-radius: 40px / 20px; /* CSS3 (Opera 10.5 e Internet Explorer 9) */
}

También podemos utilizar este efecto en esquinas individuales.
Es importante resaltar que acá ya no se utilizan slash’s.

33_05

.radius { 
/* Firefox 3.5 */
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 60px 20px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 60px 20px;

/* Google Chrome y Safari */
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 60px 20px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 60px 20px;

/* CSS3 (Opera 10.5 e Internet Explorer 9) */
border-top-left-radius: 0px;
border-top-right-radius: 60px 20px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 60px 20px;
}

Así mismo funciona con la forma resumida de las esquinas individuales.
El orden es el mismo, pero los cuatro primeros valores antes del slash son para X y los cuatro siguientes para Y.

33_06

.radius { 
-moz-border-radius: 40px 10px 40px 10px / 10px 40px 10px 40px; /* Firefox 3.5 */
-webkit-border-radius: 40px 10px 40px 10px / 10px 40px 10px 40px; /* Google Chrome y Safari */
border-radius: 40px 10px 40px 10px / 10px 40px 10px 40px; /* CSS3 (Opera 10.5 e Internet Explorer 9) */
}

También podemos obviar valores de la misma forma que lo hicimos aquí para resumir aún más nuestro código, de esta forma el ejemplo anterior nos quedaría así:

.radius { 
-moz-border-radius: 40px 10px / 10px 40px; /* Firefox 3.5 */
-webkit-border-radius: 40px 10px / 10px 40px; /* Google Chrome y Safari */
border-radius: 40px 10px / 10px 40px; /* CSS3 (Opera 10.5 e Internet Explorer 9) */
}

15 Comments

    1. Paul Incháustegui

      ¡Tienes razón @Jorge_R! No obstante me gustaría resaltar que lo escrito no son trucos más que simple y puro código CSS ^^

      Para trabajar esquinas redondeadas y efectos avanzados de CSS en versiones anteriores de IE personalmente recomendaría utilizar PIE (Progressive Interner Explorer) ya que es el fix de comportamiento con el que más comodo he trabajado.

  1. Juan_Carlos

    Hola y en primer lugar gracias por poner un poco de luz con todo el lio de las esquinas redondeadas.
    Mi problema es que aunque sigo los pasos que indicas, en mi blog y con IE9 no me aparecen las equinas redondeadas, cosa que con FF, Opera o Chrome no tengo problemas.
    Y ya no se que mas hacer….
    http://estemundoestangrande.blogspot.com/

    Uso variable pero he intentado igualmente poner un valor directo, pero el IE9 sigue pasando de mi. Y ya he comprobado no estar usando el modo de compatibilidad.

    ¿Alguna sugerencia?

    Lo curioso que si visito esta web si me funciona:
    http://css3generator.com/

    1. Paul Incháustegui

      ¡Hola @Juan_Carlos! He revisado tu blog y lo veo exactamente igual en IE9 como en cualquier otro navegador; la barra lateral es la unica sección con esquinas redondeadas.

      No sé si esa es la sección que estás diseñando. Si lo es entonces si funciona; de lo contrario ayudaria a resolver el problema si pudieras incluir el código que estás utilizando.

  2. Juan_Carlos

    Gracias por responderme.
    Ayer probando en otro ordenador con W7 e IE9 me encontré con la sorpresa de que si se veian las esquinas redondeadas (como bien dices en la columna lateral).
    Al final revisando mi navegador he encontrado que si voy a “Herramientas de desarrollo (F12)”, el modo documento me sale como IE8. A la que lo cambio a IE9 se me ve bien la web.
    Lo curioso es que si cierro el navegador y lo vuelvo a abrir vuelve a cambiar a modo IE8. Pero lo importante es que es cosa de mi navegador, no del blog.

    Muchas gracias por tu ofrecimiento

  3. Juan_Carlos

    Dejo constancia por si alguien mas tiene el mismo problema que tenga la solución que a mi me ha funcionado
    He añadido a la plantilla, justo despues de la etiqueta <head> la siguiente línea:
    <meta content=’IE=9′ http-equiv=’X-UA-Compatible’/>

    Con esto se obliga a IE9 a trabajar con el renderizado IE9.

    1. Paul Incháustegui

      Muy bien @Juan_Carlos solucionaste y dominaste el problema. ¡Gracias por el aporte!

  4. J_Teran

    Compa esto no sirve y no servirá nunca, ie9 no soporta nativamente esquinas redondeadas del standard css3 (si no me equivoco la gente de micro$oft ha dicho que soportan el standard pero no del todo)

    Ahora como dice Juan_Carlos funciona pero a medias, igual tengo mis dudas, de hecho es asi como yo lo tengo con la sentencia:

    <meta http-equiv=”X-UA-Compatible” content=”IE=7″ />
    y no
    <meta content=’IE=9′ http-equiv=’X-UA-Compatible’/>

    Sin embargo esto no me ha solucionado el problema de esquinas redondeadas pero si me ha solucionado otros dramas.

    De momento lo mejor es crear una hoja de estilos independiente para ieX y cargar imagenes de las esquinas.

    f_ck ie!

    slds

    1. Paul Incháustegui

      ¡Hola @J_Teran! IE9 no soporta CSS3 al 100% pero si ofrece soporte a esquinas redondedas. Si lo dudas Microsoft tiene un post dedicado a ello: http://msdn.microsoft.com/en-us/library/gg589503.aspx.

      Si utilizas el meta <meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> las esquinas redondeadas no van a aparecer ya que ahí estas declarando que IE funcione con los estándares de IE7 (el cual vagamente soporta CSS3).

  5. J_Teran

    viejo retiro todo lo dicho

    tenia en mi html:

    <meta http-equiv=”X-UA-Compatible” content=”IE=7″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=9″ />
    ……

    He borrado las 2 primeras y si… ptm! … me ha funcionado las famosas esquinas redondas.

    1. Paul Incháustegui

      ¡Hola @J_Teran! No te imaginas como me alegra saber que te funcionaron las esquinas redondeadas, gracias por compartirlo 🙂

Leave a Reply

Su dirección de correo no se hará público. Los campos requeridos están marcados *

No soy un robot *