Question 44463 in Html Question posted in
Some basic documentation can be found here.

Rounded Corners Outlook & Co – Html

I am asking myself if there is a 2022/23 Solution for the problem with rounded corners in Outlook and all the email Clients.

The latest solution i found.

Sadly, its not realy supported in every Client. I know, support for every Client is quiet difficult, but the Solution is really buggy sometimes.

I wonder if there are new approaches to solve the problem?

I tried the solution above but it´s really buggy.

Tags:

2

Answers


  1. 0

    border-radius has very good support across email clients nowadays. (See Can I email). For Outlook on Windows, VML is still the way to go. But I would usually recommend to let things gracefully degrade instead (meaning you’ll get square corners).

    Login or Signup to reply.
  2. 0

    There are VML solutions that make you duplicate the <a> link, which is not safe. I found this the other day that lets you keep just one <a>, and there is a generator.

    This goes in the <head>, to help with Windows Mail dark mode for full colour background buttons:

    <!--[if mso]> 
<style> 
.buttonlink {background: transparent !important;} 
</style> 
<![endif]-->

    This is the button itself, at full radius (for small corners or different sizes see the generator https://vml-pather.glitch.me/?shape=button):

    <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="false" fillcolor="#3D35FF">
<w:anchorlock/>
<center style="">
<![endif]-->
  <a href="https://www.google.com" style="background-color:#3D35FF;border-radius:25px;color:#ffffff;display:inline-block;font-family:arial, sans-serif;font-size: 20px; line-height: 50px;font-weight: bold;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;" class="buttonlink">
    CTA Here
  </a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->

    Keep in mind the width on mobiles (rule of thumb 300px aim for), not to make the button width too long.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search