HTML <img> tag's border attribute
Example
The following HTML can generate different thicknesses of image borders:
<html> <body> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="1" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="2" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="4" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="8" /> </a> </body> </html>
Definition and Usage
The border attribute of the <img> tag specifies the width of the border around the image, meaning you can increase or remove the border of the image.
Note:By default, images do not have borders (unless the image is inside an a element).
Browsers usually display images representing hyperlinks (such as images contained within <a> tags) within a two-pixel-wide border to indicate that the reader can access the associated document by selecting this image.
You can remove (border="0") or widen the border of an image by using the border attribute and a pixel-width value.
Note:This attribute is also no longer recommended in HTML 4 and XHTML, and should be replaced by styles, but it is still well supported by popular browsers.
Browser Support
Although the border attribute is not recommended, all major browsers support this attribute.
Tips and Notes
Note:HTML 4.01 does not recommend using the "border" attribute of images. This attribute is no longer supported in XHTML 1.0 Strict DTD and HTML 5.
Tip:Please use CSS Border Properties to change the border style of an element. You can use CSS border properties in an external stylesheet to set a consistent border for all images on the site. This method is undoubtedly more efficient than setting the border attribute for a single image.
Compatibility Notes
The border attribute of the img element is not recommended; it is not supported in HTML 4.01 Strict and XHTML 1.0 Strict DTD.
Please use CSS instead.
CSS Syntax: <img style="border:5px solid black">
In our CSS tutorial, you can find more about border attribute details.
Syntax
<img border="value" />
Attribute value
| Value | Description |
|---|---|
| pixels | Border width, in pixels. |
TIY Instance
- The <img> tag's border attribute
- This example demonstrates how to use the border attribute of the <img> tag to change the image border.
Further Reading: Removing Image Borders
By using the border="0" attribute in the <img> tag, you can remove the border around the image hyperlink. For some images, especially those image maps, the absence of a border may improve the appearance of the page. For those clearly indicating that they are link buttons pointing to other images, without a border, the images may look better.
While removing borders will not reduce the usability of the document, it is still important to be cautious. Because without borders, it means that a very common visual indication effect of hyperlinks is removed, which may make it not as easy for readers to find these links as before. Browsers usually change the mouse pointer shape when the mouse moves over a hyperlink image, but it cannot be expected that browsers will always do so, and it is even more inappropriate to let users search for hidden links on borderless images.
We strongly recommend that you use other methods along with borderless images to let your readers know that they should click on these images. Even with simple text, it is difficult to make the document more accessible to readers.
