CSS Properties

border-radius

CSS property · 15 supported, 4 partial, 2 unsupported across 21 clients

15 of 21 email clients render border-radius fully (Sep 2, 2026 data); it breaks outright in Outlook (New), Outlook Classic.

5/7 webmail, 4/6 desktop, 6/8 mobile clients support border-radius fully.
Unsupported in Outlook (New), Outlook Classic.
Partial in Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, AOL Mail, behavior differs from browsers, test before relying on it.
Outlook Classic (Word engine, supported to at least 2029) does not fully support border-radius, and its replacement changes little here; see the deprecation diff.
Documented before/after fixes on this page cover 1 client, including Outlook Classic.
Across all clients, only 6 of 298 tracked HTML/CSS features render identically everywhere.

Source: caniemail.com (MIT), via the Emailens engine. Last tested upstream Mar 9, 2021, synced by Emailens Sep 2, 2026.

border-radius rounds the corners of an element. It is supported in every modern email client and ignored by Outlook on Windows, which renders rounded boxes as squared rectangles. Because Outlook ignores it silently rather than breaking layout, border-radius is a relatively safe progressive enhancement , but VML fallback is needed for branded buttons where the rounded shape is part of the identity.

Client Support

Client	Category	Engine	Support
Gmail	webmail	Gmail Web	Supported
Gmail Android	mobile	Gmail Mobile	Supported
Gmail iOS	mobile	Gmail Mobile	Supported
Outlook 365	webmail	Outlook Web	Supported
Outlook (New)	desktop	Outlook Web	Unsupported^{See caveat 1}
Outlook Classic	desktop	Microsoft Word	Unsupported^{See caveat 1}
Outlook iOS	mobile	Outlook Mobile	Supported
Outlook Android	mobile	Outlook Mobile	Supported
Outlook for Mac	desktop	WebKit	Supported
Apple Mail	desktop	WebKit	Supported
Apple Mail iOS	mobile	WebKit	Supported
Yahoo Mail	webmail	Yahoo	Partial^{See caveat 2}
Yahoo Mail Android	mobile	Yahoo	Partial^{See caveat 2}
Yahoo Mail iOS	mobile	Yahoo	Partial^{See caveat 2}
Samsung Mail	mobile	Samsung	Supported
Thunderbird	desktop	Gecko	Supported
HEY Mail	webmail	WebKit	Supported
Proton Mail	webmail	Proton	Supported
AOL Mail	webmail	AOL	Partial^{See caveat 2}
Fastmail	webmail	Fastmail	Supported
Superhuman	desktop	Blink	Supported

Documented caveats (2)

1.Outlook (New), Outlook Classic: Round corners can be used in VML with the RoundRect element. See buttons.cm and VML documentation.
2.Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, AOL Mail: Partial support. Shorthand for setting elliptical borders with the slash / notation is not supported e.g. border-radius: 27% 73% 70% 30% / 30% 34% 66% 70%;.

Caveats recorded by caniemail.com (MIT) and carried verbatim, one entry per wording rather than per client.

Client-by-client behaviour for border-radius

Fully supports border-radius (15): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook iOS, Outlook Android, Outlook for Mac, Apple Mail, Apple Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, Fastmail, Superhuman.

Partial support (4): Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, AOL 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

Outlook (New)

Unsupported

Use VML for rounded corners in Outlook, or accept square corners.

Outlook Classic

Unsupported

Use VML (Vector Markup Language) for rounded buttons in Outlook.

Before (Broken)

before.html

6 lines

<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>

After (Fixed)

fixed.html

18 lines

<!--[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]-->

Use VML to render rounded buttons in Outlook

Yahoo Mail

Partial

Use VML for rounded corners in Outlook, or accept square corners.

Yahoo Mail Android

Partial

Use VML for rounded corners in Outlook, or accept square corners.

Yahoo Mail iOS

Partial

Use VML for rounded corners in Outlook, or accept square corners.

AOL Mail

Partial

Use VML for rounded corners in Outlook, or accept square corners.

Related Features

!important accent-color align-items animation aspect-ratio backdrop-filter background background-blend-mode

Check your own HTML for border-radius

Paste your own, or run the sample below. Analyzed in this page, with no signup and nothing stored.

Zero-Friction Engine Preview

Test your border-radius layout across 21 email clients

Preview rendering, catch CSS issues, and see how border-radius displays across Outlook, Gmail, and Apple Mail. Free, no account needed.

Instant live preview · No signup required · 21 email engines

Last tested upstream: Mar 9, 2021 · Last synced by Emailens: Sep 2, 2026

caniemail.com (MIT) records Mar 9, 2021 as the last time border-radius was tested in a real client, 5 years before this sync. Syncing copies that result forward, it does not re-test it. Carried in @emailens/engine data v0.12.2.