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.
