JMiur [E]

Bordes redondeados ... si algo no se redondea no es cool y bueno, todos terminamos sucumbiendo a la tendencia y eso no es ni malo ni bueno. Todos menos Internet Explorer porque allí, redondear esquinas es imposible y, aunque se había anunciado que esa propiedad iba a ser agregada a IE8, tal cosa no ha ocurrido y todos se quejan aunque, erróneamente, son muchos los sitios que hablan de esa propeidad y eso provoca confusión entre los usuarios.

¿Que se dice? Que las propiedad para redondear bordes establecida por la w3org es:

border-radius: valor;

pero, los navegadores aún no la han implementado, por ahora, cada uno de ellos utiliza una propiedad específica:

-moz-border-radius: valor; /* Firefox, SeaMonkey, K-meleon y los que usan el motor Gecko) */
-webkit-border-radius: valor; /* Google Chrome, Safari y los que usan el motor WebKit */
-khtml-border-radius: valor; /* Konqueror */

incuso IE invento la suya pero jamás la implemento así que esto, no funcionará:

-ms-border-radius: valor;

Moraleja, IE no tiene propiedades CSS para redondear esquinas y si queremos hacerlo debemos utilizar JavaScript (Nifty Corners Cube o jQuery Corners, etc). En este sentido, dillerdesign.com ha creado un código muy liviano y bastante simple que permite que redondeemos esquinas en IE, incluso en versiones viejas. Lo llamaron DD_roundies y el script lo podemos descargar en su versión minimizada de sólo 12KB.

Lo agreamos antes de </head>:
<script src="URL_DD_roundies.js"></script>
A partir de ahí, podemos usarlo de dos maneras, limitándolo a IE o aplicándolo a todos los navegadores. La sintaxis genérica es esta:
DD_roundies.addRule('CLASE', 'VALOR', 'MODO');
donde:

CLASE es el selector a usar, la clase CSS del elemento HTML a redondear
VALOR es el tamaño de la curva y pueden definirse entre uno y cuatro valores separados por comas
MODO es opcional y define si el script se aplciará atodos lso navegadores (TRUE) o sólo a IE (FALSE)

A la función la podemos llamar antes de </head>, definiendo clases diversas, por ejemplo:
<script>
DD_roundies.addRule('.ejemplo1', '15px');
DD_roundies.addRule('.ejemplo2', '30px 0 20px 0');
DD_roundies.addRule('.ejemplo3', '20px', true);
</script>
Así que bastaría colocar esas clases en un elemento HTML para que funcionara:


En este ejemplo, el script sólo afectará a IE ya que no agregamos el tercer parámetro (por defecto es FALSE):
<div class="ejemplo1"> contenido </div>

In facilisis enim sit amet lacus congue tristique. Aenean luctus mollis enim, non tincidunt tellus sodales nec. Aenean massa nisl; egestas ut bibendum luctus, iaculis vitae orci. In quis erat mi, quis luctus eros. Nam facilisis mauris at tellus bibendum semper. Vestibulum accumsan, sapien ullamcorper suscipit convallis, sapien magna venenatis enim, ut congue nunc orci ut erat.

En este ejemplo ocurre lo mismo, salvo que redondeamos sólo dos esquinas:
<div class="ejemplo2"> contenido </div>

In facilisis enim sit amet lacus congue tristique. Aenean luctus mollis enim, non tincidunt tellus sodales nec. Aenean massa nisl; egestas ut bibendum luctus, iaculis vitae orci. In quis erat mi, quis luctus eros. Nam facilisis mauris at tellus bibendum semper. Vestibulum accumsan, sapien ullamcorper suscipit convallis, sapien magna venenatis enim, ut congue nunc orci ut erat.

En los dos primeros, si quisiéramos, podríamos establecer las propiedades para el resto de los navegadores del mismo modo que hacemos habitualmente, definiiendo una clase:
.ejemplo1 {
-moz-border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
}

In facilisis enim sit amet lacus congue tristique. Aenean luctus mollis enim, non tincidunt tellus sodales nec. Aenean massa nisl; egestas ut bibendum luctus, iaculis vitae orci. In quis erat mi, quis luctus eros. Nam facilisis mauris at tellus bibendum semper. Vestibulum accumsan, sapien ullamcorper suscipit convallis, sapien magna venenatis enim, ut congue nunc orci ut erat.

Por útimo, si queremos queremos que el script agregue un borde en todos los navegadores, colocamos el parámetro TRUE que es lo que está definido en el tercer ejemplo:
<div class="ejemplo3"> contenido </div>

In facilisis enim sit amet lacus congue tristique. Aenean luctus mollis enim, non tincidunt tellus sodales nec. Aenean massa nisl; egestas ut bibendum luctus, iaculis vitae orci. In quis erat mi, quis luctus eros. Nam facilisis mauris at tellus bibendum semper. Vestibulum accumsan, sapien ullamcorper suscipit convallis, sapien magna venenatis enim, ut congue nunc orci ut erat.

35 comentarios:

José GDF  

Podría ser lo que haría más vistosa mi nueva plantilla en IE (por cierto, ya la estrené hace un par de semanas, se me pasó decírtelo :$ ). ¡Hasta Opera 10.50 ya redondea las esquinas con sólo border-radius!

Ya probé JQuery Corners, pero me dio problemas. Ya te contaré cuando pruebe este script, pues debería hacer los experimentos con IE abierto a mano, ¿verdad que sí?

Gracias. :)

Responder
VRedondoF  

Saludos JMiur .
Te escribo como ultima opcion para ver si puedes ayudarme.
Soy un "carroza" y por ello mis limitaciones son grandes en esto del blog.
Llevo en tres dias (mas de 15 horas ) dedicados a encontrar un sistema que me permita presentar mi blog como tu lo haces "usease" completa la ultima publicacion y en los X siguientes el titulo con un pequeño subtitulo (2/3 lineas.) , aunque me vale solo con el TITULO.
Tambien me vale solo el titulo tambien en la ultima publicacion.
No puedo utilizar el "leer mas .." porque publico por correo e.
He encontrado varios sistemas pero no soy capaz de que funcionen.
He estado buscando en tu blog y tampoco he encontrado nada.
Estoy dando tumbos de un blog a otro y nada ...
Te agradeceria mucho si me pudieras ayudar mi blo es este
http://tabloncentral2010.blogspot.com/

Agradecido de antemano , recibe un saludo.
Victorino Redondo.

Responder
Jessica  

Oh, muy interesante! En mi trabajo solo usan IE y es una pesadilla a la hora de diseñar plantillas. Esto ayudará un poco. Gracias por compartirlo y por la explicación.

Responder
Adrux  

Hola JMuir, pues la verdad es que redondamente, no muchas cosas funcionan bien en IE. En Opera puede que si, como dice nuestro amigo, pero por ejemplo te "destruye" visualmente las imágenes. Así que, esperando todos estamos, a que estandaricen los navegadores.
De otra parte, necesito tu consejo y conocimiento. Pues luego de no decidirme (por ahora) a utilizar las nuevas plantillas en Blogger Draft, me embarqué en una plantilla WP adaptada para Blogger. Busqué 100 días y 100 noches en la Web, y bueno, soy el novio para esta plantilla. Estoy trabajando para armar...
Te envío un correo.

Responder
Desasnate  

Hola vagabundia si no te molesta quisiera entrevistarte las preguntas que te quiero hacer son:

¿Como empezaste tu blog?

¿Te interesan otras cosas además de la internet y la informatica?

¿Tuviste tropiesos o desiluciones en el transurso de tu Blog?

¿Qué le dirias a las personas que recien empiezan en Blogger sin ningun conosimiento previo?

¿Cuales fueron los programas que más usaste en los origenes del Blog?

¿Cuantos años tiene el blog?

Porfavor enviame un mensaje a mi correo respondiendo a estas preguntas.

La entrevista aparesera poco despues de que me envies el mail
En mi página: http://www.animex38.blogspot.com

Responder
Gem@  

Hay que probarlo así a simple vista parece que es un bombazo ¿lo será sobre la marcha? ya te cuento :)

Responder
JMiur  

VRedondoF:
El mçétodo que utilizo está ex`lciado en estas tres entradas 1 | 2 | 3

Jessica:
Funciona bien y no me pareció difíciil de implementar.

Adrux:
Que todos los navegadores estandaricen su código es, casi una utopía; no lo harán jamás así que lo mejor es adaptarse y tratar que las cosas salgan lo mejor posible.

Desasnate:
Creo que eso, deberías hacerlo de modo personal y no en un comentario.

Gem@:
Funciona bie; es un tanto lento, es decir, no es lento sino que las cosas se redondean al final de cargarse la página pero es de lo mejorcito que he visto.

Responder
VRedondoF  

Muy agradecido Jmiur por tu amabilidad.

Responder
JORGE  

Eres un genio, realmente muy interesante ese script. y por allí no abra un código css que simule un hover en IE 6, he visto que algunos sitios le anda... pero no se como implementarlo en IE 6.

Saludos jorge

Responder
JMiur  

Jorge:
Lo hay. Fíjate en esta entrada aunque es un detalle del que no deberías preocuparte y dejar de dar soporte a IE6. Simplemente, hay que ignorarlo.

Responder
Víctor  

Yo siempre uso Opera y me sorprendí hace unos días que me di cuenta que al fin implementó las esquinas redondeadas y con lo requerido por el w3c.

Responder
JMiur  

Sí, eso leí que se había implementado en la versión más nueva.

Responder
José GDF  

A falta de más pruebas, tengo ya resultados de las que he hecho con este script.

En mi plantilla actual, en IE, o tengo texturas, o tengo curvas, porque resulta que a las clases e identificadores a los que aplico este script los deja desnudos sin imagen de fondo (incluida la cabecera)... ¿Por qué? La verdad, ni idea... :$

...Así que, de momento, hasta pensar qué hacer (o hasta que alguien me sugiera alguna cosa), de momento prefiero las texturas a las curvas.

Eso sí, reconozco que el redondeo lo hace muy bien, para lo ligerito que es el script, y no interfiere con las librerías JQuery, que son las que tengo instaladas en la plantilla. Lo digo por si a alguien le pudiera interesar saberlo.

Responder
raf  

hola buenas
estoy probando esto y veo que en el ejemplo2 dices que solo redondea 2 esquinas, cuando redondea las cuatro (repite los valores), al menos en ie8 que es el estoy usando para probarlo. En principio hay que poner los cuatro valores y empiezan desde la esquina superior izq en direccion de las agujas del reloj. si no queremos que redondee una esquina ponemos el valor a cero.

Responder
JMiur  

raf:
Sí, eso es verdad, me faltó colocar el cero; ya está corregido.

Responder
Yises  

Muchas gracias por la info!!! Le he dedicado un post (http://yises.com/blog/2010/10/06/bordes-redondeados-en-ie/) resumiéndolo

Responder
Roberto  

Buenas gente !!
Quería hacerles la siguiente consulta:
Acabo de probar este método y funciona a la perfección!! Y de paso hice una prueba a ver si resultaba: ver si pongo una img y me redondea los bordes también.
El firefox lo hace, poniendo la img de fondo al div pero el ie no lo hace, directamente no muestra la img. Alguna solución ??

Desde ya muchas gracias.

Responder
JMiur  

En IE no existe la propiedad así que no se redondearán los bordes. Si no ves la imagen, seguramente hay un error de sintaxis en el estilo; revisa lo que has puesto, que haya una caracter espacio entre cada palabra de la definición de background y en te el cierre del paréntesis y la siguiente palabra.

Responder
Roberto  

Buenas !! Ante todo gracias por el aporte. Funciona, diría que a la perfección, aunque tengo un problema.
Mi tema es el siguente:
apliqué este script a una plantilla y funciona bien en cualquier navegador. Arme todo un sitio, bastante extenso y tanto en IE como en FIREFOX se ve bien, pero en el resto de los navegadores no (Chrome, Opera, Safari). Podrían ayudarme por favor?


Desde ya muchas gracias.

Responder
JMiur  

No sé donde está tu ejemplo.

Responder
Omar  

no funciona en IE peguen y copien el link en una pestaña nueva del navegador y veran que no funciona

Responder
JMiur  

Sí funciona en IE. Acá te dejo una captura.

Hay que ser más prudente para dejar comentarios.

Responder
Desinopsis.blogspot.com  

¿Funciona en IE 9?

Responder
JMiur  

En IE9 es innecesario ya que ese navegador soporta perfectamente la propiedad border-radius

Responder
marbar81  

Yo he tenido problemas cuando el DIV que quiero redondear tiene además un degradé (gradient). Si tiene color único, por decirlo de alguna forma, me funciona OK. Otro detalle es la ubicación que termina dandole al DIV, creo que algunas veces sube un poco el DIV. De todas formas es lo mejor que he encontrado hasta el momento.

Responder
matu  

el ejemplo no funciona, al menos en IE9.

JMiur  

En IE9 es innecesario ya que interpreta normalmente la etiqueta border-radius.

Responder
Alí Reyes H.  

La pregunta es ¿aun hay quienes utilizan Internet Explorer? crei que dejo de usarse hace 10 años (risas) al menos sirve para descargar otros navegadores.

JMiur  

Lo usa muchísima gente y lo seguirá usando muchísima gente y no veo motivo alguno para que no lo utilicen. Es una herramienta como cualquier otra.

Si te gusta, la usas y si no te gusta, no la usas. Eso es todo.

Responder
Unknown  

super me ayudo mucho mucho GRACIAS

Responder
Yulexis Rodriguez Ramirez  

Hola:
Muy bueno el aporte, me funcionó a la perfeccion, solo un problema, que ahora no me funciona la propiedad hover que anteriormente si lo hacia, por lo que les pido si alguien puede ayudar se lo agradeceria.

Desde gracias y espero respuestas

saludos

Responder
v a l e r i a c i s  

Perdón que no he terminado de leer todo, pero esto se aplica a blogger tambien? quisiera redondear los bordes de mis entradas...

JMiur  

Los ejemplos están aplicados en la entrada así que sí, funcionará en Blogger.

Responder
Fliberty Kelly Perez Ramirez  

Funciona correctamente, lo he probado en IE8, el problema es que le da color negro al borde, y estoy utilizando bloques que requieren el borde de otro color.

JMiur  

A esta altura del siglo 21 carece de sentido dar soporte a IE8. No vale la pena el esfuezo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR