Skip to main content
HTML Elements

<style>

HTML element · 10 supported, 5 partial, 0 unsupported across 15 clients

Client Support

ClientCategoryEngineSupport
GmailwebmailGmail WebPartial
Gmail AndroidmobileGmail MobilePartial
Gmail iOSmobileGmail MobilePartial
Outlook 365webmailOutlook WebSupported
Outlook (New)desktopOutlook WebPartial
Outlook ClassicdesktopMicrosoft WordPartial
Outlook iOSmobileOutlook MobileSupported
Outlook AndroidmobileOutlook MobileSupported
Apple MaildesktopWebKitSupported
Apple Mail iOSmobileWebKitSupported
Yahoo MailwebmailYahooSupported
Samsung MailmobileSamsungSupported
ThunderbirddesktopGeckoSupported
HEY MailwebmailWebKitSupported
SuperhumandesktopBlinkSupported

Client-by-client behaviour for <style>

Fully supports <style> (10): Outlook 365, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Yahoo Mail, Samsung Mail, Thunderbird, HEY Mail, Superhuman.

Partial support (5): Gmail, Gmail Android, Gmail iOS, Outlook (New), Outlook Classic. Expect rendering quirks unique to each engine — partial support typically means a subset of values, an ignored shorthand, or sanitizer-specific rewrites.

Fixes & Workarounds

Gmail

Partial

Use a CSS inliner tool (like juice) to move styles to inline attributes.

Before

<style>
  .header { background-color: #6d28d9; padding: 32px; }
  .title  { color: #fff; font-size: 24px; }
</style>
<div class="header">
  <h1 class="title">Hello</h1>
</div>

After

<div style="background-color: #6d28d9; padding: 32px;">
  <h1 style="color: #fff; font-size: 24px;
             font-family: Arial, sans-serif; margin: 0;">
    Hello
  </h1>
</div>

Inline CSS for Gmail compatibility

Gmail Android

Partial

Use a CSS inliner tool (like juice) to move styles to inline attributes.

Before

<style>
  .header { background-color: #6d28d9; padding: 32px; }
  .title  { color: #fff; font-size: 24px; }
</style>
<div class="header">
  <h1 class="title">Hello</h1>
</div>

After

<div style="background-color: #6d28d9; padding: 32px;">
  <h1 style="color: #fff; font-size: 24px;
             font-family: Arial, sans-serif; margin: 0;">
    Hello
  </h1>
</div>

Inline CSS for Gmail compatibility

Gmail iOS

Partial

Use a CSS inliner tool (like juice) to move styles to inline attributes.

Before

<style>
  .header { background-color: #6d28d9; padding: 32px; }
  .title  { color: #fff; font-size: 24px; }
</style>
<div class="header">
  <h1 class="title">Hello</h1>
</div>

After

<div style="background-color: #6d28d9; padding: 32px;">
  <h1 style="color: #fff; font-size: 24px;
             font-family: Arial, sans-serif; margin: 0;">
    Hello
  </h1>
</div>

Inline CSS for Gmail compatibility

Outlook (New)

Partial

Use a CSS inliner tool (like juice) to move styles to inline attributes.

Outlook Classic

Partial

Use a CSS inliner tool (like juice) to move styles to inline attributes.

Production guidance for <style>

<style> is a HTML element. Across the email client matrix, 10 of 15 tracked clients support it fully, 5 only partially, and 0 not at all. The clients most likely to require a workaround for this feature are Gmail, Gmail Android, Gmail iOS. Each of them needs a tailored fallback — see the per-client examples above for the specific code fix Emailens recommends.

When in doubt, ship a baseline that renders without <style> and treat it as progressive enhancement on clients where support is verified. Emailens automatically detects cross-client divergence on this feature when you preview an email, so you can see exactly which template paths break before a campaign goes out.

Related Features

Test your email across all 15 clients

Preview rendering, catch CSS issues, and get actionable fixes — free.

Try Emailens Free

Support data last updated Apr 27, 2026 · synced from caniemail.com via @emailens/engine.