By default images within a hyperlink a shown with a 1 pixel blue border surrounding them. To stop the border from being shown the default border value is overridden with a value of 0.
The old method of removing the border was by setting the border property of the image. The preferred method is now through the use of CSS.
The example below shows the old method using the border parameter within the IMG tag definition.
<IMG src=”/images/apples.jpg” border=”0″>
The current preferred alternative method is to use CSS either in-line or in an external file. In the following examples I have also changed the tag definition to include all lower case and a trailing / as per the current practice.
In-line CSS
In line CSS uses the style parameter with the relevant CSS styling, for example
<img src=”/images/apples.jpg” style=”border: 0;” alt=”apples” />
The semi colon isn’t strictly required after the border value, it being the last item. However, I prefer to add them rather than omit it in error. More relevant when creating a complete CSS class within the water all CSS referenced file.
External CSS File
It is better to add a class to the image and add the CSS for the class within the external CSS files for the website. Below is shown the image reference with a class called noborder and the associated code for the CSS file.
<img src=”/images/apples.jpg” class=”noBorder” alt=”apples” />
.noBorder{
border:0px;
}
Configuring the image border using classes allows all images to be configured at a single point. Changes can then be enacted across all images with that class, amended if required according to changes which are desired either for presentation and the appearance of the site of if the standards requirements change.
It is also possible to configure all images globally adding a CSS reference for the image tag. No class needs to be added to each use of the image tags. The updated CSS form is as shown below:
img{
border:0px;
}
