Una de las nuevas características de este nuevo/futuro estándar del w3 consorcium nos da la posibilidad de agregarles elegantes esquinas redondeadas a nuestros divs.

Es importante aclarar que esta propiedad no puede ser “leída” por ninguna versión de Internet Explorer (para variar) aunque de Microsoft prometen/avisan/auguran/esperan que su futura versión IE9 si la soporte. De todas formas tampoco es que por eso el sitio vaya a descuadrarse en ie, simplemente no se van a ver las esquinas redondeadas.

Bueno pasemos al código:

Supongamos que tenemos el siguiente div:

Con sus correspondientes estilos:

Entonces nuestro div se ve así:

Sencillito, minimalista y liviano pero un poco aburrido, eso si.

Para redondear sus esquinas usaremos la propiedad border-radius. Pero tendremos que usarla por cuadruplicado ya que solo el Opera (todos de pie) puede leer correctamente la propiedad. Los demás navegadores utilizan, digamos, su propia implementación. Nuestro código queda así:

Noten que a cada propiedad hay que asignarle una medida que se corresponde al radio. Si indicamos 2 ( border-radius: 5px 8px; ) la primera es el radio horizontal y la segunda el vertical. Nuestra div ahora queda así:

Si lo que queremos es redondear específicamente una de las esquinas, por ejemplo la esquina superior derecha, usamos lo siguiente:

Así si lo agregáramos al div anterior lograríamos el siguiente efecto:

Bueno esto es todo por hoy, desde ya les digo que hay otras formas de lograr esquinas redondeadas compatibles también con IE pero esas las veremos mas adelante.

The Esquinas redondeadas con css3 by Iván Stadius, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.