Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: imágenes con bordes redondeados

Datos de búsqueda

CSS: imágenes con bordes redondeados

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">&nbsp;</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).

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio