I have made plenty of websites where you use an image as a link. This could be as an image ‘submit’ button in a form, or an arrow to click for next item.
My lovely design is somewhat ruined by the dotted line that appears around the image when it is clicked by the site visitor.

Usually this is not an issue if you’ll soon be leaving the page. The big problem is when you use the link to ‘show’ or ‘hide’ information. This means the site visitor is still looking at the page while your javascript and CSS are hiding or revealing your additional information or next picture.

This is the sort of thing I am talking about.

This type of dotted outline is really annoying and spoils your nicely crafted buttons or other images used as links.

You can spend a little while diligently using style=”border:none” as part of the image tag and it will make no difference. Don’t worry, help is at hand !!

This CSS code will remove the dotted outline.

a {
outline: none;
}

Having applied that code to your style sheet information and uploaded it to your website, if you view the image again and click on it the dotted line is gone !!

However please remember that the outline is used for accessibility purposes so ‘a:focus’ should be added to your CSS stylesheet also. This will then replace the removed style. Most people will choose to make this the same as the ‘a:hover’ style.