border-radius

Client-by-client behaviour for border-radius

Fully supports border-radius (12): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Superhuman.

Partial support (1): Yahoo Mail. Expect rendering quirks unique to each engine — partial support typically means a subset of values, an ignored shorthand, or sanitizer-specific rewrites.

No support (2): Outlook (New), Outlook Classic. Plan fallbacks for these clients before relying on border-radius in production sends.

When to use border-radius in email

• Creating pill-shaped CTA buttons that match modern UI conventions.
• Softening hero-image card corners to match the rest of a marketing site's design language.
• Building rounded avatar circles for newsletter author bylines.

Rendering behaviour and edge cases

• Outlook on Windows ignores border-radius entirely. The element renders as a sharp rectangle.
• VML <v:roundrect> can simulate rounded buttons in Outlook but requires conditional comments and adds maintenance overhead.
• Apple Mail applies border-radius even to non-overflow:hidden parents, occasionally clipping inner shadows differently than browsers.

Recommended fallback strategy

Accept squared corners in Outlook for most layouts. For brand-critical CTAs, wrap the button in a VML <v:roundrect> conditional that targets only Outlook 2007+. Avoid relying on border-radius to mask content overflow — Outlook will not clip.

Fixes & Workarounds

<a href="https://example.com"
  style="background-color: #6d28d9; color: #fff;
         padding: 12px 32px; border-radius: 6px;
         text-decoration: none; display: inline-block;">
  Click Here
</a>

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
  href="https://example.com"
  style="height:44px; v-text-anchor:middle; width:200px;"
  arcsize="14%" strokecolor="#6d28d9" fillcolor="#6d28d9">
  <w:anchorlock/>
  <center style="color:#fff; font-family:Arial,sans-serif;
    font-size:14px; font-weight:bold;">Click Here</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com"
  style="background-color: #6d28d9; color: #fff;
         padding: 12px 32px; border-radius: 6px;
         text-decoration: none; display: inline-block;">
  Click Here
</a>
<!--<![endif]-->