Prevent Unwanted Borders on Linked Images
Lately quite a few emails in my inbox have what I assume to be an accidental blue border around some (but not all) of the images. Take a look:
After some investigation, I found that a handful of email clients will display a border around images that are linked unless you’ve specified a border of zero or none in your code. You can use either HTML or CSS to do this easily by setting the HTML “border” element to “0″, or the CSS property “border-style” to “none”:
HTML Method
<a href=”http://www.litmus.com”><img src=”image.jpg” width=”500″ height=”50″ border=”0″></a>
CSS Method
<a href=”http://www.litmus.com”><img src=”image.jpg” width=”500″ height=”50″ style=”border-style: none;”></a>
When a border is not specified at all, you may end up with a blue (or black) border around your image:
Border not specified
<a href=”http://www.litmus.com”><img src=”image.jpg” width=”500″ height=”50″></a>
It’s also worth noting that images without links aren’t affected by this email client quirk. In other words, you can omit a border declaration altogether and steer clear of unwanted borders if there is no link wrapped around an image. However, I’d recommend always including a border declaration in case a link is added at some point in the future. Here’s a list of the clients that will display borders by default when an image is linked:
- AOL Mail (Explorer)
- AOL Mail (FF)
- Gmail (Explorer)
- Gmail (FF)
- Lotus Notes 8
- Lotus Notes 8.5
- Outlook 2000-2003
- Thunderbird
- Windows Mobile
If you’re curious, you can see the test I ran through all the major clients to test this out.
