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, CSS3 ya es una realidad en todos 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:

#contenedorr3 { 
border-radius:3px; 
-moz-border-radius:3px; /* Firefox */ 
-webkit-border-radius:3px; /* Safari y Chrome */ 

/* Otros estilos */ 
border:1px solid #333;
background:#eee;
width:100%;
padding:5px;
}

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

<div id="contenedorr3">
<p>Este es un contenedor con bonitos bordes redondeados de 3px</p>
</div>

El resultado, algo como lo siguiente:

bordes-redondeados-css3

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

#contenedorr10{
-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;

/* Otros estilos */ 
border:1px solid #333;
background:#eee;
width:100%;
padding:5px;
}

Que tendría por resultado lo siguiente:

bordes-redondeados2-css3

Claro, visibles de este modo en los navegadores compatibles con esta característica.

Navegadores compatibles con border-radius

Las navegadores compatibles con esta característica son:

No la soportan:

  • Internet explorer.
  • Opera.

Aunque en ambos casos, confirmaron una próxima incorporación de esta característica.

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.

En lo personal, cada vez uso más esta propiedad y empiezo a olvidarme de las laboriosas técnicas con imágenes. Por suerte la famosa guerra de los navegadores esta acelerando la creación y adopción de mejores plataformas web y no son pocos los usuarios ya con acceso a esta y otras características.