Search code examples
htmlrenderinghtml-email

HTML email template is not rendering correctly

I have an email template which has the following code:

<html>
  <head></head>
  <body style="font-family:Verdana">
    <h1 style="font-size:36px;text-align:center">Welcome!</h1>
    <div style="text-align:center;margin:50px">
      <span style="font-size:18px">We are happy to see You joined! Please press the button below to confirm Your account.</span>
    </div>
    <div style="text-align:center">
      <a style="background-color:#3a86e0;border-radius:4px;color:#fff;font-size:18px;padding:8px 32px 8px 32px;text-decoration:none;display:inline-block" href="{parameter}">Confirm email address</a>
    </div>
    <div style="text-align:center;margin:50px">
      <span style="font-size:12px">
        <b>You received this message because Your email address was used to create an account in our project. Ignore this in case of a mistake.</b>
      </span>
    </div>
  </body>
</html>

And when it comes to rendering in a web browser it looks just fine, but I open such email in the Outlook app or built-in Windows Mail app the corner radius property of the <a> tag is being ignored, and the link is drawn with the square corners.

Please see the images below to see the difference.

This is how its rendered in the apps: Invalid email rendering

This is how its rendered on the email websites: Valid email rendering

I searched the web for similar issues but had no luck. Could you help me please, why the same HTML is being rendered differently and how I can fix this? Thanks.

Solution

  • Some email providers do not support padding and border-radius.

    You can try generating a bulletproof button here that will use workarounds for those unsupported properties