Las esquinas y bordes redondeados son parte natural del diseño web, pero siempre han representado un dolor de cabeza para implementarlas; hay métodos con JavaScript, con imágenes, HTML y CSS. Sin embargo, cada vez esta más cerca la implementación de CSS3 en los navegadores más populares y con ella, la posibilidad de crear bordes redondeados solo con CSS (y sin imágenes), entre otras atractivas características.

Crear bordes redondeados con CSS3

La propiedad encargada de crear los bordes en las esquinas es border-radius, pero dado de su carácter de borrador, los navegadores agregan una sintaxis adicional.

Ejemplo: para crear un contenedor de 3px de radio en las esquinas basta el siguiente código:

#contenedor01{
    border-radius:3px;
    -moz-border-radius:3px; /* Firefox */
    -webkit-border-radius:3px; /* Safari y Chrome */ 
 
    border:1px solid #333;
    background:#eee;
    width:90%;
    padding:5px;
}

Aplicado a cualquier contenedor html con id=contenedor01; por ejemplo:

 <div id="contenedor01">
    <p>Contenedor con bordes redondeados a 3px</p>
 </div>

El resultado, algo como lo siguiente:

También es posible especificar esquina por esquina, el radio de curvatura. Por ejemplo:

#contenedor02{
    -moz-border-radius-topleft:0px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:0px;
 
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:0px;
 
    border:1px solid #D40000;
    background:#FFFFFF;
    width:50%;
    padding:5px;
}

Que tendría por resultado lo siguiente:

También se puede especificar cada esquina en una sola linea CSS. Ejemplo:

#contenedor03{
    border-radius: 3px 10px 2px 10px;
    -moz-border-radius: 3px 10px 2px 10px;
    -webkit-border-radius: 3px 10px 2px 10px;
 
    border: 1px solid #D40000;
    background: #ffffff;
    width: 50%;
    padding: 5px;
}

Resultado:

Conclusión

Aun falta un tiempo para tener esta propiedad tenga un alto soporte, pero sin duda que podemos iniciar su uso. Al usarlo en el diseño web, los usuarios con navegadores más actuales podrán disfrutar de un diseño completo y los usuarios con otros navegadores no tendrán una gran afectación en el uso del sitio y con una versión al tamaño de su navegador.