TL;DR
Remove borders from all links and images:
a, img {
border:none;
outline:none; /* this breaks accessibility */
}
**Full version**
If you only want to remove borders from images that are links, you should do the following:
a img {
border:none;
outline:none; /* this breaks accessibility */
}
The only difference is that there is no comma between a and img meaning only images inside a-tags will have this rule applied
Pro tip: Use a css reset
Browser inconsistencies like this one are numerous, so web developers often use a “css reset” i.e. https://necolas.github.io/normalize.css/ or http://meyerweb.com/eric/tools/css/reset/. This will (among other nifty things) reset things like borders, margins, etc. on a number of elements so they render more consistently across browsers.
Note on accessibility
The dotted outline, that is often judged as disturbing by developers, has a very important function for keyboard users.
You should never remove it. If you do, you need to find another visual indicator of where focus is, by adding a :focus style