HTML email template is not rendering correctly

Question

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:

This is how its rendered on the email websites:

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.

background.cm has you defining two href's each time which gets annoying if its self service. I prefer to use one from Email on Acid. it renders perfect across all email clients. If you are after rounded edges then go with background.cm and if not check this one out: stackoverflow.com/questions/59664145/… — Syfer
– Syfer, Commented Dec 31, 2021 at 12:17

Gabriel Nuñez de Andrade · Accepted Answer · 2021-12-23 20:17:43Z

1

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

answered Dec 23, 2021 at 20:17

Gabriel Nuñez de Andrade

4483 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML email template is not rendering correctly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related