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:
<style> .caja{border:1px solid #000;width:200px;height:200px;} .redondea { border-radius: 5px;} </style> <div class="caja redondea">Cualquier contenido</div>
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:
.redondea {border-radius: 5px 2px 7px 9px;}
El primer valor se corresponde con la esquina superior izquierda y va avanzando en el sentido de las agujas del reloj:
- Esquina superior izquierda
- Esquina superior derecha
- Esquina inferior derecha
- Esquina inferior izquierda
Redondeando hasta formar un círculo
Si queremos redondear las esquinas hasta hacer un círculo podemos hacerlo así:
.redondea {border-radius: 50%;}
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:
.redondea { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
Donde las dos primeras líneas añaden compatibilidad a los navegadores antiguos de mozilla (firefox) y webkit (chrome, safari)
Bien explicado y sencillo