Border with different width under Outlook

Question

CampaignMonitor said CSS border property is accepted by all email clients.

I tried this:

.test1 {
border: 2px solid # 000000
border-width: 0 0 0 2px;
}

or this:

.test2 {
border-style: solid;
border-color: # 502090;
border-top-width: 2px;
border-right-width: 0 / * (| 0px | none) * /
border-bottom-width: 0;
border-left-width: 0;
}

But it doesn't work on Outlook 07/10/13.

I tried mso-border-* but there's always a border, even if I specify 0 as width.

Do you have any solution ?

Thanks.

Answer 1

I found a solution, but I don't recommend it because of the curious proprietary implementation by Microsoft.

So, in conditionnal comment, I add this to have only top border :

.border {
mso-border-right-alt: none #FFFFFF 0;
mso-border-bottom-alt: none #FFFFFF 0;
mso-border-left-alt: none #FFFFFF 0;
mso-border-top-alt: solid #903010 2pt; /* px works too */
}

It works but this kind of border is outside the box (at least on Outlook 07/10/13).

Finally, I opted for fake borders made ​​with td background (and all the tricks to have thick width). Code is more complex and no easy to maintain, but it's the world on emailing (thanks to Microsoft)...

Answer 2

Try using the html declaration border="".

You should still be able to declare your color in CSS.

Answer 3

If you try opening the same web page on Internet Explorer / Edge, you should now be able to copy and paste the table without adding mso-border-* code.