I am asking myself if there is a 2022/23 Solution for the problem with rounded corners in Outlook and all the email Clients.
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.
On
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.
border-radiushas 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).