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) */
}
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Comentarios


Invitado
martin
6 años 3 días hace

por fin!!!

ahora entonces, a publicitar el explorer 9!

Invitado
milicia
5 años 11 meses hace

buena guia, actualizada con Internet Explorer 9 :)

Invitado
Jorge_R
5 años 7 meses hace

ojo..hay otros trucos para IE de versiones anteriores

Invitado
5 años 7 meses hace

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/

Invitado
5 años 7 meses hace

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

Invitado
5 años 7 meses hace

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.

Invitado
J_Teran
5 años 6 meses hace

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

Invitado
J_Teran
5 años 4 meses hace

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.

Invitado
Rafael
5 años 2 meses hace

Perfecto, me funciono… gracias.
Un saludo desde Bolivia

wpDiscuz