When the language began to be defined HTML, the element
img
(which we use to put images) had an associated calling attribute border to be able to have images with a border. By applying a value in pixels to said attribute we made the image associated with the element appear with a border.
It should be noted that for compatibility, this attribute continues to be supported. However, it is advisable not to use it.
The line of code would be like the following:
<img src="my_image.jpg" border="3">
But with the appearance of style sheets CSS, this attribute is obsolete. From that moment on we would have to assign a style to the image, so that it would have a border.
The CSS that allows us to associate a border to an element (in this case to an image) is
border-width
. To this attribute we can associate a value that will represent the width of the border.
The syntax of the
border-width
is the following:
border-width : <line-width>{1,4}
In this way, to associate a border to an image we will have to associate a style to the image, using the attribute
style
. We are left with the following line of code:
<img src="my_image.jpg" style="border-width:1px;">
The good thing about the styles is that new properties have been added, which allow us to customize the border. One of these properties is
border-style
, which allows us to indicate the style of the border we want (solid, with dashed lines,…). Its syntax being the following:
border-style : <line-style>{1,4}
Some of the values for the line style of
border-style
are: dotted, dashed, solid,…
Now, the line of code would look like this:
<img src="my_image.jpg" style="border-style:dotted;border-width:1px;">
I hope this article in which we have seen how to have images with a border has been useful to you.