Hoy explicaremos paso por paso lo que hay que hacer para poder tener bordes redondeados en todos los navegadores, y en especial en el que suele dar más problemas en este tema, el Internet Explorer.

Pasos a seguir:

• Descargarse de DillerDesign el archivo js (yo he cogido el de mínimo tamaño puesto que realmente no voy a modificarlo). En caso de que lo hayan eliminado tb puedes descargarlo aquí.
• Incluir ese js en el head.

<script src="/js/DD_roundies_0.0.2a-min.js"></script>

• Al cuadro que queramos redondear le ponemos una clase que le identifique. Aquí lo haremos llamándolo por ejemplo “cuadro”.

<div class="cuadro">lo que queramos poner </div>

• Justo al comienzo del body, pondremos.

<script type="text/javascript"></script>

¿Y qué significa esa última línea de código?

• Primer parámetro ‘.cuadro’ indica la clase del div que queremos redondear.
• Segundo parámetro ’10px 10px 10px 10px’ Qué redondeo queremos darle a cada una de las esquinas, en este caso a todas le damos 10px de redondeo.
• Tercer parámetro false, significa que sólo querremos mostrarlo en el caso de que el usuario lo vea en IE. En el caso en que estemos en Firefox, Ópera, Chrome,… podremos hacerlo mediante css sin que añada líneas de código innecesarias.

Nota: Por Internet hay muchos sitios en donde se explica como hacerlo, pero en el 80% de las webs visitadas era erróneo, no sabéis cuanto tiempo he perdido viéndolo. Menos mal que encontré esta página, que es de donde he sacado esta forma, compatible con IE8 e IE7 (no he mirado más allá)

Hoy voy a explicar cómo hacer unos bordes redondeados a una imagen mediante la herramienta photoshop. Los pasos a seguir son:

• Abrir la imagen en cuestión.
• Desbloquearla (al principio tendrá un candado al lado de la capa, clicamos dos veces sobre la capa, le damos a ok y ya la tendremos desbloqueada).
• Mediante la herramienta selección (la del rectangulito) seleccionamos toda la capa y vamos a Selección->Modificar->Redondear y le introducimos por ejemplo 5 píxeles
• Selección invertir y una vez que estén seleccionados sólo los bordes darle a suprimir.
• Y ya tenemos una imagen con los bordes redondeados!!!!!!!