Hay ocasiones en las que nos encontramos maquetando diseños en los que aparecen imágenes de las que tenemos la certeza que van a ser publicables en el sitio definitivo.
Hay dos vías para que la imagen lleve los bordes redondeados:
- Editar cada imagen que se vaya a publicar: es muy costoso a largo plazo.
- Hacerle las esquinas redondeadas por CSS y que funcione hasta en Internet Explorer 6.
Voy a exponer la segunda solución, hacerlo por CSS.
Haciéndolo por CSS hay dos soluciones:
- Utilizar una capa vacía.
- Utilizar una imagen de un píxel transparente.
Se utilizará una capa vacía o una imagen transparente, no me gusta pero no he encontrado otra solución: tiene que haber un elemento HTML que quede por encima de la imagen. La capa superior deberá tener las mismas dimensiones que la imagen, y posición relativa. La capa interior (o la imagen) que está vacía llevará una posición absoluta y tendrá también las mismas dimensiones, además de llevar una imagen de fondo que será la que nos haga el efecto de esquinas redondeadas.
Utilizaremos el siguiente HTML si escogemos la solución de la capa vacía:
<div class="caja_imagen">
<p><img src="[...]" alt="[...]" /></p>
<div class="borde_imagen"> </div>
</div>Y si elegimos la solución de la imagen transparente:
<div class="caja_imagen">
<p><img src="[...]" alt="[...]" /></p>
<img class="borde_imagen" src="blanco.gif" alt="" />
</div>Aquí está el CSS a utilizar para ambas soluciones (las dimensiones son para el caso de ejemplo):
div.caja_imagen div,
div.caja_imagen img,
div.caja_imagen p,
div.caja_imagen {height:37.5em; position:relative; width:50em;}
div.caja_imagen .borde_imagen {background:url(borde.gif) no-repeat 0 0; left:0; position:absolute; top:0;}De esta forma tan sencilla se obtiene una imagen con bordes redondeados.
Ver ejemplo funcionando o descargarlo (archivo ZIP, 328 KB).