Erase blue border on image in HTML email

html css html-email

16,956

Solution 1

Unfortunately, the best solution is to use the deprecated border attribute since not all email readers parse/apply CSS... as a separate style section, a separate sheet, or embedded in the HTML. If you have a guaranteed audience (all using the same email viewer) then by all means use CSS if you can.

<a href="#">UP &nbsp;;<img src="arrow.png" border="0" /></a></div>

For testing here's a simple HTML document that should show all the proposed solutions:

<html>
<head>
    <title>IMG border example</title>
    <style>.rion a img {border:0 none;}</style>
</head>
<body>
    <div>1) Default: 
      <a href="#">UP &nbsp;;<img src="arrow.png" /></a></div>
    <div>2) Img border 1: 
      <a href="#">UP &nbsp;;<img src="arrow.png" border="1" /></a></div>
    <div>3) Img border 0: 
      <a href="#">UP &nbsp;;<img src="arrow.png" border="0" /></a></div>
    <div>4) A style border none: 
      <a href="#" style="border:none">UP &nbsp;;<img src="arrow.png" /></a></div>
    <div>5) Img style border none: 
      <a href="#" >UP &nbsp;;<img src="arrow.png" style="border:none" /></a></div>
    <div class="rion">6) Stylesheet a img style border none: 
      <a href="#" >UP &nbsp;;<img src="arrow.png" /></a></div>
</body>
</html>

In my browser (Firefox) 1,2,4 show borders (default border on 1,4 is thicker), while 3,5,6 show none... however 5 & 6 rely on the email client being able to parse CSS, 6 in particular can get really dodgy with webmail clients (which mess around with style classes on base elements because they have their own CSS).

Solution 2

have you tried something like this:

<a href="#">UP &nbsp;<img src="arrow.png" style="border:none"></a>

Solution 3

Setting the border: 0 none; CSS property should fix that, if you wanted it to occur on all images wrapped in links, you could use it as such:

a img 
{
    border: 0 none;
}

For use in an e-mail, you may have to include a style block in the actual e-mail:

<style type='text/css'>
a img
{
    border: 0 none;
}
</style>

jsFiddle Example

Solution 4

To be on the extra safe side, specify no border in both tags.

<a href="#" style="border: 0;">UP &nbsp; <img src="arrow.png" style="border: 0;"></a>

Solution 5

This question is a few months old, but I ended up here with the same question, so hopefully this may save someone the time I wasted.

The td has a background color of that neon blue, and by default has a bit of padding.

I just styled the td with...

style="background:none;"

I knew all about the border style defaults, and hadn't had the td background default in the mail clients I had previously tested, but it kept popping up in gmail.

View more solutions

16,956

Author by

Enrique Moreno Tent

I am a full-stack web developer. Born in Spain, living in Germany currently. Always interested in learning more and improving the quality of my work. Also, very glad to be a part of this community where we all help each other. Let's break some eggs!

Updated on June 29, 2022

Comments

Enrique Moreno Tent almost 2 years
Im trying to send a HTML email and I have this piece of code:
```
<a href="#">UP &nbsp;;<img src="arrow.png" /></a></div>
```
But theres a blue border JUST around my image. How can I get rid of it. Thanks.
Rudu almost 13 years

! Careful, not all email readers will parse or follow CSS properties.
Rion Williams almost 13 years

Did you include a style block in the e-mail? This may fix that issue.
Rudu almost 13 years

Do you have other styles in the page that might be overriding? Does the image have an embedded border? Is it possible the A element has a background colour, while the IMG has a margin so it looks like a border?
amosrivera almost 13 years

@Dbugger how are you checking your email?