Removing dotted lines around images used as links
article compiled by steve

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.

dottedOutline

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 !!

NOdottedOutline

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.

Related posts:

Post comment

You must be logged in to post a comment.

Anyone who owns a website often has a question to ask, a problem to solve or some other type of enquiry about their website.

Click here to get help from the Web Doctor

Subscribe to our Blog

Comments

Theme Colour Changer

Customise the theme colours to your own choices.... there's so much to see, go on you know you want to !!

Customise