Search code examples
htmloutlookhtml-emailemail-client

Border with different width under Outlook


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.


Solution

  • 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)...