CSS » Imagenes con borde
Cuando se empezó a definir el lenguaje HTML, el elemento IMG (que nos sirve para poner imagenes) llevaba asociado un atributo llamador border. Aplicando un valor en pixels a dicho atributo conseguíamos que la imagen asociada al elemento apareciese con un borde.
Hay que indicar que por compatibilidad, dicho atributo sigue siendo soportado. Si bien, es recomendable no utilizarlo.
La línea de código sería como la que sigue:
<IMG SRC="mi_imagen.jpg" BORDER="3">
Pero con la aparición de las hojas de estilo CSS, dicho atributo quedo obsoleto. A partir de ese momento tendríamos que asignar un estilo a la imagen, para que esta tuviese un borde.
El atributo CSS que nos permite asociar un borde a un elemento (en este caso a una imagen) es border-width. A dicho atributo podremos asociarle un valor que representará el ancho del borde.
De esta manera, para asociar un borde a una imagen tendremos que asociar un estilo a la imagen, mediante el atributo style. Quedándonos la siguiente línea de código:
<IMG SRC="mi_imagen.jpg" STYLE="border-width:1px;">
Lo bueno que tienen los estilos es que se han ido añadiendo nuevas propiedades, las cuales nos permiten personalizar el borde. Una de estas propiedades es border-style, la cual nos permite indicar el estilo del borde que queremos (solido, con líneas discontinuas,...).
Algunos de los valores de border-style son: dotted, dashed, solid,..
Ahora, la línea de código nos quedaría de la siguiente forma:
<IMG SRC="mi_imagen.jpg" STYLE="border-style:dotted;border-width:1px;">
Artículos relacionados:
Noviembre 19, 2007 #
como le podria asignar una imagen a un borde ??? se ke existe un comando en la hoja de estilo de ccs3 que es border-image !!pero nose emplearlo !!!
mas ke nada me gustaria asignar la imagen al borde de un “frameset”
Julio 16, 2011 #
buena noche como están todos ustedes es muy bonito toda las imágenes que tienen pero deberían poner las imágenes como por ejemplo: para bautizos, Cumpleaños, Matrimonio