Ver entrada completa. Esquinas redondeadas en todos los exploradores

General mente para hacer una esquina redondeada utilizamos en CSS las propiedades:

-moz-border-radius:7px; -webkit-border-radius:7px; pero no funciona en el lindo y querido Internet Explorer(que raro no?).

Ahora existe un código JavaScript creado por Drew Diller, lo pueden ver en su página:

Realmente es muy fácil de adaptarlo.

Nos ofrece 2 archivos:

• DD_roundies_0.0.2a.js  de 17Kb.
• DD_roundies_0.0.2a-min.js  igual pero reducido a 9Kb.

Yo recomiendo el DD_roundies_0.0.2a-min.js ya que es de menor peso.

¿Cómo colocarlo?

Hay 2 Opciones siempre colocarlo arriba de </head>:

La primera manera:
 
Descargamos el archivo y lo subimos a nuestro propio servidor.
Una ves tengamos el link donde esta alojado el archivo, colocamos la siguiente linea:

<script src="http://SERVIDOR PROPIO/DD_roundies_0.0.2a-min.js"></script>

La segunda manera:

Copiamos el total del script y lo colocamos así:

<script type='text/javascript'>
//<![CDATA[

ACÁ VA EL SCRIPT COPIADO

//]]>
</script>

Guardamos los cambios.

Para que queden redodendeados tenemos que llamar a la función de la siguiente manera:

Pondremos abajo del código JavaScript anteriormente puesto quedando arriba de </head>:

<script type='text/javascript'>
  DD_roundies.addRule('.footer', '10px', true);
  DD_roundies.addRule('.comment-body', '10px 20px 30px 40px', true);
</script>

Donde .footer es la clase que estoy redondeando, y 10px el tamaño de la curva.
En el segundo caso estoy redondeando la clase .comment-body y le estoy dando distintos tamaños de curva a sus esquinas, 10px top-left, 20px top-right, 30px bottom-right y 40px bottom-left.

Se puede elegir una clase o una id.

Veamos un ejemplo con un cuadrado:

El código utilizado:

<div id="cuadrado1" style="background: #000099; border: 1px solid rgb(0, 0, 0); height: 100px; width: 300px;">
</div>

Y lo llamamos así:

<script type='text/javascript'>
  DD_roundies.addRule('#cuadrado1', '10px 20px 30px 40px', true);
</script>

Pueden utilizar todas las lineas necesarias:

<script type='text/javascript'>
  DD_roundies.addRule('.clase1', '10px', true);
  DD_roundies.addRule('.clase2', '10px 20px 30px 40px', true);
  DD_roundies.addRule('.clase3', '5px 7px 8px 10px', true);
  DD_roundies.addRule('.clase4', '10px 15px 20px 25px', true);
  DD_roundies.addRule('#id', '10px', true);
  DD_roundies.addRule('#id2', '10px 20px 30px 40px', true);
</script>

O si tienen distintas clases o id con un mismo tamaño de curva es como en CSS:

<script type='text/javascript'>
  DD_roundies.addRule('.clase1, .clase2, .clase3', '10px', true);
  DD_roundies.addRule('#id, #id2, #id3', '10px', true);
</script>

Para entender el código que llama o hace el efecto:

Empieza con DD_roundies.addRule
Seguido de la clase o id + tamaño de la curva + true todo entre ()
La clase o id van entre ' ' a continuacion una , el tamaño igual entre ' ' ,
True es para que la curva se muestre en todos los navegadores.
Y al final del cierre ) va ; si queremos agregar otra linea con otro código para curvar.

DD_roundies.addRule('clase o id', 'tamaño de curva', true);
DD_roundies.addRule('clase1 o id1, clase2 o id2', 'curvatop-left curvatop-right curvabottom-left curvabottom-right', true);

Si utilizamos mas de una clase o id tendria que ir así separado por una , dentro de ' ':

DD_roundies.addRule('clase1, clase2', 'tamaño de curva', true);

Ahora para una imagen:

La imagen si o si tiene que tener una clase o id con un borde y un padding.

<div style="text-align: center;">
<img id="lavado" style="border: 2px solid #000000;padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqH2Xbp9zH3bNtCxAHzVjEpdGOhuDC6T0XILweJx6xmwtJaRLD4vCvGNEBdH05GvEfzzeCySgVHeuDR1fyImHifnZ-ajVEKvYq8Ycug1326dmtga6n5VN7BZ5L4k7UIqkiBvHs2gSThYH/s320/ropa2.jpg"/></div>

Y así llamamos a la curva:

<script type='text/javascript'>
DD_roundies.addRule('#lavado', '10px', true);
</script>