CODEWITHSUNDEEP
htmlcssoutlookhtml-email
Mike Harrison
Mike Harrison

Reputation: 776

Outlook 2016 / 2019 not showing border bottom

I have got an email template together where everything is working apart from one element, which is not rendering properly in Outlook. This is the code:

<a href="https://website.com/link" style="color: #fff; display: inline-block; font-weight: bold; text-decoration: none; border-bottom: solid 2px #e30517; padding-bottom: 3px; padding-left: 3px; padding-right: 3px;">View Event</a>

Other browsers show me this:

Correctly rendered border-bottom

Outlook 2016 & 2019 look like this (note the missing bottom border on the link):

Missing border-bottom

Are there any tips / tricks to get that 2px bottom border to display on those email clients?

Upvotes: 6

Views: 19892

Answers (7)

Abhishek E H
Abhishek E H

Reputation: 482

I use <hr/> for adding border bottom.

Upvotes: 0

josh1978
josh1978

Reputation: 748

Outlook doesn't support display: inline-block. A work-around would be to throw the link into its own table and give its table cell a border.

<table width="700" align="center" style="background-color:#3b3b3a;box-sizing:border-box;border:none;border-spacing:0;border-collapse:collapse;">
  <tr>
    <td style="padding:30px 0 15px;color:#fff;font:bold 20px/22px sans-serif;text-align:center;text-transform:uppercase;">
      Event Title
    </td>
  </tr>
  <tr>
    <td style="padding:0 30px 25px;color:#fff;font:normal 16px/20px sans-serif;text-align:center;">
      Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.
    </td>
  </tr>
  <tr>
    <td style="padding:0 0 30px;">

      <table width="auto" align="center" style="box-sizing:border-box;border:none;border-spacing:0;border-collapse:collapse;">
        <tr>
          <td style="padding:0 3px 3px;border-bottom:2px solid #e30517;text-align:center;">
            <a href="https://website.com/link" style="display:inline-block;font:bold 14px/18px sans-serif;color:#fff;text-decoration:none;text-transform:uppercase;">View Event
            </a>
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

My guess is that the lack of support for inline-block is causing the issue with border. I came across your post for a somewhat similar issue: I have an a link set to inline-block and a border on all sides, but trying to override the border in mso conditional styles in the head doesn't work.

Upvotes: 0

Raymond Okafor
Raymond Okafor

Reputation: 1

I was having the same issue, and that's why I came here. But I was able to fix it. Don't know why though, but it worked.

The font size of the initial bordered box (with missing bottom border) was 18px, I reduced it to 16px, and the bottom border appeared. 17px didn't work either.

Please if anyone has an explanation for this fix, kindly share.

Upvotes: 0

Syfer
Syfer

Reputation: 4479

I tried something similar with span & div inside a table with mso-border-alt as a fallback but the results were not satisfactory.

Being pressed for time I left it at the code similar to below:

<a href="http://www.blah.com" target="_blank" style="text-decoration:underline; color:#0A0A24;text-decoration-color:#66CBC3;mso-border-bottom-alt: 2px solid #66CBC3;">MemberAccess</a>

Note:

  • Defined border on a hrefand underline creates a thicker line under href's on a few email clients.
  • mso-border-bottom-alt - only works on Outlook 2019
  • border on span or div (inside a href) doesn't work well in Outlook

If you do find a bullet proof way for underline please let us know.

Upvotes: 0

gwally
gwally

Reputation: 3547

Try adding this:

mso-border-alt: 2px solid #e30517;

It's Outlook-specific and will be ignored by other email clients. It will create a box around "View Event", but at least it gives you the emphasis.

mso-border-bottom-alt: 2px solid #e30517; will create an underline in Outlook 2019 only.

The better fix is to create a table with one column and two rows. The first row would have the "View Event" and the second row would be 2px high with a background color. That is the most consistent fix across all email clients.

Good luck.

Upvotes: 5

yerme
yerme

Reputation: 855

Your best bet for Outlook is to either use an image as the border, or you could make the "border" a new td with a single "." inside it; styled so that you can't see the actual dot. Outlook is always a pain to work around.

Upvotes: 1

Ashylen
Ashylen

Reputation: 420

According to this site support for borders in Outlook seems to be buggy. The workaround could be to use tables and table property "border". I found this article, maybe it will help you achieve your goal.

Upvotes: 3

Related Questions