Imagenes con borde

04/Jun/2007 CSS , , 5 Comentarios

Cuando se empezó a definir el lenguaje HTML, el elemento IMG (que nos sirve para poner imágenes) 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:

  1. <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:

  1. <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:

  1. <img src="mi_imagen.jpg" style="border-style:dotted;border-width:1px;">

Espero que os haya sido de utilidad este artículo en el que hemos visto como poder tener imágenes con borde.

Vídeos sobre CSS


5 comentarios en “Imagenes con borde”

Víctor Cuervo

jesus

esta bueno

Víctor Cuervo

Molina

5t6 hb6byh
tmuertos

Víctor Cuervo

Víctor Cuervo

@maria cristina vasquez ramos,

Jejejejejeje. Ponemos las primeras que nos encontramos. 😀

Víctor Cuervo

maria cristina vasquez ramos

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

Víctor Cuervo

sainesy

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”

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*