Existen diversas técnicas para implementar bordes redondeados mediante el uso de imágenes o tablas. Sin embargo, lo ideal serí­a poder implementarlo sin utilizar imágenes, de forma más fácil y civilizada. Esto no es posible actualmente con CSS1, CSS2 o CSS 2.1. Actualmente los navegadores no soportan el 100% de la versión 2.1, por lo que se tardará en adoptarse las caracterí­sticas de CSS3, lo que será el futuro de CSS.

Aunque CSS3 está en fase de desarrollo, ya existe una propuesta del borrador por parte de la W3C, donde incluyen algunas nuevas caracterí­sticas. Una de ellas y que me ha llamado la atención es la posibilidad de crear bordes redondeados sin necesidad de imágenes o tablas, la cual es soportada actualmente en forma experimental por los navegadores que utilizan el motor de renderizado Gecko, como Firefox y tambien Mozilla, Netscape, Galeon, Epiphany, Camino, Flock, K-meleon y otros derivados de Mozilla. También es soportado por WebKit. El navegador más popular del mundo parece no sumarse aun ya que tiene ciertos problemillas para digerir el CSS2 y proponen en su sitio que utilicemos el ‘viejo’ modo, ya que no tienen pensado implementarlo de forma nativa.

Veamos primero un ejemplo:

Lo que hicimos fue agregar la propiedad border-radius:[valor]px; a la etiqueta DIV. Al ser todaví­a experimental, agregamos -moz al principio para los navegadores basados en Mozilla, pero cuando esté pronto ya no será necesario. De todas formas es mejor poner ambas formas para que cuando esté implementado ya estemos preparados y funcione en la mayorí­a de los navegadores que sigan el estándar.

Además de lo anterior, podemos controlar cada borde del recuadro. Vean los siguientes ejemplos:

Esquina superior izquierda

-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;

Esquina superior derecha

-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;

Esquina inferior derecha

-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;

Esquina inferior izquierda

-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;

Esquinas superiores

-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
border-top-right-radius: 8px;

Diversos valores

border-radius: 10px 5px;
-moz-border-radius: 10px 5px;

El efecto de sombra lo logran jugando con las propiedades de los bordes