Redondear los bordes con CSS

Actualmente todos los navegadores reconocen el comando CSS «border-radius» que nos permite redondear las esquinas de los bordes de casi cualquier etiqueta (div, p, etc.) o imagen.

Su uso es sencillo:

[HTML]
<style>

.caja{border:1px solid #000;width:200px;height:200px;}
.redondea { border-radius: 5px;}

</style>

<div class=»caja redondea»>Cualquier contenido</div>

[/HTML]

En el ejemplo hemos creado un div de 200x200px con un borde negro de 1px. Gracias a la clase «redondea», el borde se redondea en las 4 esquinas en 5px de radio.

Podemos redondear cada una de las 4 esquinas de manera independiente:

[HTML]

.redondea {border-radius: 5px 2px 7px 9px;}

[/HTML]

El primer valor se corresponde con la esquina superior izquierda y va avanzando en el sentido de las agujas del reloj:

1. Esquina superior izquierda
2. Esquina superior derecha
3. Esquina inferior derecha
4. Esquina inferior izquierda

Redondeando hasta formar un círculo

Si queremos redondear las esquinas hasta hacer un círculo podemos hacerlo así:

[HTML]

.redondea {border-radius: 50%;}

[/HTML]

Esto es muy utilizado en fotos de perfil de las redes sociales, por ejemplo. El único requisito para que nos quede un círculo perfecto es que la imagen o contenedor (div, p, etc.) sea cuadrado, o sea, tenga el mismo ancho que alto.

Buscando mayor compatibilidad

Aunque como decía al principio en la actualidad todos los navegadores reconocen la instrucción border-radius de CSS, podemos buscar una mayor compatibilidad añadiendo lo siguiente:

[HTML]

.redondea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

[/HTML]

Donde las dos primeras líneas añaden compatibilidad a los navegadores antiguos de mozilla (firefox) y webkit (chrome, safari)