Esquinas redondeadas en CSS3 y Mozilla Firefox

@ 06 . septiembre . 2006

Una de las principales novedades que veremos en CSS3 es la facilidad de realizar esquinas redondeadas con una simple línea de código. Podremos despedirnos de aquellas épocas donde teníamos que poner 4 imágenes en cada esquina. Eso será prehistoria, cosa de gente incivilizada.

Si bien aún no podemos verlo funcionando al 100%, no pasará mucho tiempo para que los navegadores decentes lo implementen. Por lo que no esta demás poner el código respectivo en nuestros diseños hoy y así estar listos para el mañana, además que ahorraremos tiempo.

Los que ahora esten navegando con Mozilla, Firefox o WebKit podrán ver esta área con esquinas redondeadas.

Si estas usando Internet Explorer y no ves a lo que me refiero, te recomiendo que bajes Firefox ahora y veas de lo que te pierdes.

El código

Las esquinas redondeadas en CSS3 se obtienen con:
border-radius: [valor]px;
Actualmente obtenemos lo mismo en los navegadores que usan el motor de renderizado Gecko (Firefox, Mozilla, Netscape, Galeon, Epiphany, Camino, Flock, etc), aumentando sólo -moz- al inicio del mismo código:
-moz-border-radius: [valor]px;

Recomendación.- Es mejor usar ambas opciones, de esta forma varios navegadores ya podrán mostrar las esquinas redondeadas. Cuando implementen CSS3, el código estará listo, sin necesidad de eliminar/cambiar nada.

Considerando esto, el código para el anterior ejemplo es muy simple:

&lt;div style=" background-color: #047391; <strong> -moz-border-radius: 10px; border-radius: 10px;</strong> border: 1px solid #0D324F; padding: 20px;" &gt;

Más variantes

A continuación presento más opciones de realizar variaciones con este código:

Esquina superior izquierda redondeada con: -moz-border-radius-topleft y border-top-left-radius

Esquina superior derecha redondeada con: -moz-border-radius-topright y border-top-right-radius

Esquina inferior derecha redondeada con: -moz-border-radius-bottomright y border-bottom-right-radius

Esquina inferior izquierda redondeada con: -moz-border-radius-bottomleft y border-bottom-left-radius

Podemos combinar las anteriores premisas, por ejemplo, si queremos bordes redondeados arriba izquierda y derecha:

-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px;

Esquinas superiores redondeadas

También podemos usar 2 valores:

Esquina redondeada con:
border-radius: 20px 10px;
-moz-border-radius: 20px 10px;

Nota.- Según CSS3 deberíamos de ver 4 esquinas iguales con elipses con radio horizontal de 20px y radio vertical de 10px. En cambio en Firefox se ven 2 esquinas alternas iguales de 10 px y las otras dos de 20px. Firefox aún no soporta el uso de elipses.

Y si usamos 4 valores obtenemos:

Cuatro esquinas de distintos radios según:
border-radius: 20px 10px 60px 30px;
-moz-border-radius: 20px 10px 60px 30px;

y un efecto de sombra al usar solo borde derecho e inferior:
border-bottom: 3px solid #999;
border-right: 3px solid #999;

Internet Explorer 7

En el blog de IE, cuando se les preguntó acerca si IE7 tendría esta nueva modalidad de CSS3, respondieron:

Los desarrolladores Web generalmente quieren usar esquinas redondeadas en sus páginas. Desde que nososotros no tenemos planes de hacer un soporte nativo a esquinas redondeadas en IE7 (que es una característica de CSS3), quiero señalar que hay un artículo disponible en MSDN que muestra como uno puede fácil y efectivamente implementar esquinas redondeadas a Internet Explorer hoy mismo. ¡Disfrutenlo! Link

Cabe resaltar que el enlace que dicen tiene un método fácil y eficiente nos lleva a una página que recomienda el empleo de tablas con 4 imágenes redondeadas en cada esquina. Una pesadilla de 17 líneas y 4 imágenes. -.-

Nosotros pedimos que se implementen estas novedades en la próxima versión de Internet Explorer, pero ellos nos hacen oídos sordos, y se van por lo que es más fácil … para ellos.

Si llegaste hasta aquí y aún usas Internet Explorer … no esperes más en abandonarlo y usar un navegador que se preocupa de respetar estándares y de estar más que actualizado en sus características. En otras palabras, cambia tu Volvo del 98 por un Mercedes 2006.

Baja Firefox es más rápido, seguro, liviano, con el podrás usar pestañas, extensiones y temas personalizables. Si quieres otras opciones, también te recomiendo Opera, Flock, o Camino. :)

DanielSemperAutor: Daniel Semper, fanático de la tecnología y sus usos sociales, cinéfilo geek, al menos veo una película por semana, innovador en Front-End y activo lector de comics. En mis tiempos libres soy ingeniero y estudio una maestría en Sidney en la universidad de UTS. Me puedes contactar en: twitter, Google Plus.
e-mail: hola @ danielsemper.com

Noticias Similares

  • MorphX

    OMFG!!! Simplemente BRUTAL :D

    Es genial lo bien que queda y lo facil de usar e implementar :) un gran avance :D

  • Aoyama

    Aún se ven algo extrañas las esquinas redondeadas, pero ya es un enorme avance….

  • XKlibur

    Wow, que cool!!, puedes dar formas estupendas fácilmente (y)

  • neojp

    Por más que exista el CSS3, no se usará hasta al menos 2 años después de haberse dado como oficial por cuestión de compatibilidad y versiones en los browsers.

    Además, css3 aún es un boceto. Por eso mismo, Mozilla le agrega el sufijo moz a dicha propiedad css. Esto hacen cada que crean una propiedad propietaria de codigo. Es decir, estan usando el estándar del boceto css3 para gecko y asi implementarlo en XUL.

    Lo mas seguro es que si las esquinas redondeadas pasan a ser oficiales dentro del css3, mozilla le quite dicho sufijo.

    PD: Las esquinas redondeadas por código css aún no son perfectas, eso se aprecia en tus ejemplos azules.

    Saludos :)

  • Usagi

    Cuando no tu con tu publicidad xD aunque salva almas u.u btw ellos nunca tienen planes, los roban como salen xD.

  • LA100RRA

    Muy bueno el truco, esperemos que lo perfeccionen e implementen rapido y que IE se pudra en lo más profundo de los avernos junto con toda la bola de ineptos que lo desarrollan. U_U

  • BlackDaemon

    mm interesante… pero la mayoria usa IE osea que pues a esperar a que la lansen oficialmente para poder usar sin problemas…

    saludos

  • pedro

    Excelente tema!!!

    Por ahora, el que lo desee, pues que siga usando imagenes… sino, pues a dar la bienvenida a sitios bien hechos, con estándares ;)

  • Mario

    Navengando con la version 8 de Opera no puedo ver las esquinas redondeadas solo con firefox.
    Con respecto a la gente de desarrollo de IE7…. espero que se pudran malditos!!! ^^

  • Aquos Porta

    Maldito IE :furia: !!!! Caga todo el trabajo de diseño ( :sonrojar: perdón por la expresión, pero no encuentro una mas adecuada) Ojalá pronto la gente entienda que es una basura y deje de ser usado.

    (y) Muy bueno tu artículo.

  • Mozillo

    Con esas políticas cerradas lo único que conseguirá Microsoft es que la gente deje de utilizar el IE y se cambie a Mozilla u otro navegador… al final sólo pierden ellos. :cancion:

  • Marc

    (y) Perfecto !!

    El problema con internet explorer es que viene con el ordenador (con windows) y es el que la gente acaba usando. En mi pagina web uso los round corners y quedan muy bien… lástima que la mayoría de usuarios no lo puedan ver debido al navegador que utilizan

    Yo prefiero evidentemente firefox e incluso safari al navegador de microsoft.

  • Omar

    Muy bueno a ver que nos trae IE para contrarestar eso, pero para variar basta 5 razones para usar Firefox

  • hrthrh

    ay una prueva mejor que esta que us codico para todo los navegadores de css3

  • ARIEL Castellanos

    Google Chrome tambien es una excelente opcion hoy en dia (si no que la mejor)