Prevent Unwanted Borders on Linked Images In Email0
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–and never fear! There’s a few ways to prevent unwanted borders on linked images like these ones.
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”:
<a href=”http://www.litmus.com”><img src=”image.jpg” width=”500″ height=”50″ border=”0″></a>
<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
- Windows Mobile
If you’re curious, you can see the test I ran through all the major clients to test this out.
Do you know if your subscribers use clients that might be affected by this?
Know your audience
When it comes to email marketing, it’s all about your audience. Use Litmus Email Analytics to discover which email clients are most popular with your subscribers. Sign up free!