Artículos
CSS

Imágenes con borde

04/Jun/2007

Cuando se empezó a definir el lenguaje HTML, el elemento img (que nos sirve para poner imágenes) llevaba asociado un atributo llamador border para poder tener imágenes con borde. 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.

La sintaxis del atributo border-width es la siguiente:

border-width : <line-width>{1,4}

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,…). Siendo su sintaxis la siguiente:

border-style : <line-style>{1,4}

Algunos de los valores para el estilo de línea 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;">

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

Código Fuente

Descárgate el código fuente de Imágenes con borde
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
4 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios