If you are building websites, you should definitely take into account the settings for displaying pages in the browsers of visitors. In particular, images placed inside link tags are outlined by browsers with a blue one-point (pixel) wide border by default. This should be taken into account both when setting the size of page elements and when determining their color design. There is an alternative solution to the problem - using HTML and CSS to force browsers not to display the frame.
Instructions
Step 1
If for your version of the page design it will be enough to remove the border from one specific image with a link or just a few, then it will be enough to add the border attribute with a zero value to their tags. With this addition, the HTML-code of images with links may look like this: You can also use the style attributes - these options are equivalent. With the style attribute and a zero border value specified in it, the same code would look like this: When using the style attribute, the zero value (0px) can be replaced with the text "none" (without quotes).
Step 2
If you want to prevent the appearance of a frame for absolutely all images with links placed on the page, then it is easier to do this in one place in the HTML code. To do this, a description of page styles with a rule common to all links should be placed in the heading part of the document (between the and tags). You can write this rule like this: a img {border: none;} It should be placed inside a tag that tells the browser that there is a description of styles in CSS here:
a img {border: none;}
Step 3
If you use JavaScript scripts in a page that perform any actions when you click on a text link without switching to another page, then after clicking in some browsers and around the text link, a similar dotted frame remains. To prevent this unauthorized change to your design, add an appropriate rule for text links to the CSS style description block:
a {outline: none;}
