Outlook 365 email CSS: what breaks, and what to write instead

169 of 300 features work in Outlook 365 · 34 partial · 97 not supported. It differs from Outlook (New) on 1 feature: text-shadow.

Works 169 · Partial 34 · Not supported 97 · Untested 0 · of 300

Outlook Web · webmail · prefers-color-scheme: works

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

See what breaks ↓

Outlook 365 opens with a free account.

A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

Where Outlook 365 is the outlier

1 feature work in at least 14 of the other 20 clients and is not supported here.

So an email that looks right in most clients can reach your reader in Outlook 365 without them.

:chaining
Works in 14 of 21 · partial in 2 · not supported in 4 · 1 untested
· not supported here
Buggy.

Outlook 365 on real installs

The Emailens probe for each feature, captured on Outlook 365's own installs, next to the Emailens live preview of Outlook 365.

animation in a real Outlook.com

The Emailens probe for animation on a real Outlook.com — Outlook 365

The same probe in the Emailens live preview of Outlook 365 — Outlook 365

linear-gradient in a real Outlook.com

The Emailens probe for linear-gradient on a real Outlook.com — Outlook 365

overflow in a real Outlook.com

The Emailens probe for overflow on a real Outlook.com — Outlook 365

What to write instead

7 features Outlook 365 does not fully support have a written fix. See them in the table ↓

transform

The fix for Outlook 365

Pre-render transformed states as images or use table layout

The engine still flags this in the fix: An image points to an address no inbox can load (rotated-content.png), so Outlook 365 shows a broken image instead.

after

4 lines

<!-- Pre-render rotated content as an image -->
<img src="rotated-content.png" width="200" height="200"
  alt="Rotated content"
  style="display: block; border: 0;" />

Show the original

before

3 lines

<div style="transform: rotate(45deg);">
  Rotated content
</div>

Test this fix, free

Outlook 365 opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

<svg>

The fix for Outlook 365

Convert inline SVG to an image for email compatibility

after

3 lines

<img src="https://example.com/icon.png"
  width="24" height="24" alt="Icon"
  style="display: block; border: 0;" />

Show the original

before

3 lines

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="#6d28d9"/>
</svg>

Test this fix, free

Outlook 365 opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

animation

The fix for Outlook 365

Replace CSS animation with an animated GIF

after

4 lines

<!-- Use an animated GIF for the effect -->
<img src="https://example.com/badge-animated.gif"
  width="60" height="24" alt="New!"
  style="display: inline-block; border: 0;" />

Show the original

before

5 lines

<style>
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  .badge { animation: pulse 2s infinite; }
</style>
<span class="badge">New!</span>

Test this fix, free

Outlook 365 opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

Paste your email and see what Outlook 365 does to it.

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

Dark mode in Outlook 365

Works @media prefers-color-scheme works in Outlook 365.

Works in 9 of 21.
Not supported color-scheme is not supported in Outlook 365.

Works in 4 of 21.
Not supported meta-color-scheme is not supported in Outlook 365.

Works in 2 of 21.

Live preview: Outlook.com applies partial color inversion in dark mode.

How to target Outlook 365

Selectors that single out Outlook 365, from the community list the engine ships (howtotarget.email). Copy one and replace .your-class-name.

css

3 lines

[class~="x_your-class-name"] {
  /* Replace this comment with your styles */
}

Outlook.com prefixes class names with x_ but doesn't do this on attribute selectors.

css

3 lines

[data-ogsc] .your-class-name {
  /* Replace this comment with your styles */
}

When changing a color style in dark mode, Outlook will add data-ogsc to the element.

css

5 lines

@media (display-mode: standalone) {
  [class~=""x_your-class-name""] {
    /* Replace this comment with your styles */
  }
}

Outlook PWA supports the same targeting as Outlook.com and Outlook apps.

@media is partly supported in Outlook 365. Check this selector on your email before relying on it.

css

6 lines

.your-class-name.x_chained-class-name {
  /* Styles for outlook webmail only */
}
.your-class-name.chained-class-name {
  /* Styles for everyone else */
}

No longer works (1)

css

5 lines

@media (min-resolution: 1dpi) {
  body[data-outlook-cycle] .your-class-name {
    display: block!important;
  }
}

Build one for several clients →

Before you send to Outlook 365

Test in both light and dark mode. Corrections written against data-ogsc selectors only take effect in the dark branch.
Make sure any form in the email degrades to a link, since values are never submitted.
Keep a strong system font stack: no @font-face font will load here.

Your next question

Outlook (New) · Outlook Classic

Every feature in Outlook 365

What breaks here (131) Everything (300)

HTML Elements · 16 of 48 not supported or partial here

<abbr> Works Works in 14 of 21
<acronym> Works Works in 13 of 21
<address> Works Works in 20 of 21
<audio> The <audio> element is supported, but the video can not play due to a strict Content Security Policy. Not supported Works in 4 of 21
<base> Buggy. Partial Works in 4 of 21
<bdi> Not supported Works in 6 of 21
<blockquote> Works Works in 19 of 21
<body> Partial. Partial Works in 5 of 21
<button type="reset"> Works Works in 10 of 21
<button type="submit"> Not supported Works in 11 of 21
<code> Works Works in 20 of 21
<del> Works Works in 20 of 21
<dfn> Works Works in 17 of 21
<dialog> Not supported Works in 5 of 21
<div> Works Works in 20 of 21
<form> fix Not supported. Partial Works in 10 of 21
<h1> Works Works in 20 of 21
<hr> Works Works in 18 of 21
<img> Works Works in 19 of 21
<input type="checkbox"> Works Works in 16 of 21
<input type="hidden"> Works Works in 16 of 21
<input type="radio"> Works Works in 16 of 21
<input type="reset"> Works Works in 15 of 21
<input type="submit"> Not supported Works in 12 of 21
<input type="text"> Works Works in 13 of 21
<link> fix Not supported Works in 3 of 21
<marquee> The <marquee> element is supported but not the behavior or direction attributes. Partial Works in 8 of 21
<meter> Works Works in 11 of 21
<object> Not supported Works in 1 of 21
<p> Works Works in 20 of 21
<picture> Not supported Works in 4 of 21
<pre> Works Works in 20 of 21
<progress> Not supported Works in 6 of 21
<rp> Works Works in 15 of 21
<rt> Works Works in 15 of 21
<ruby> Works Works in 15 of 21
<select> Works Works in 14 of 21
<small> Works Works in 20 of 21
<span> Works Works in 20 of 21
<strike> Works Works in 17 of 21
<strong> Works Works in 20 of 21
<style> Works Works in 16 of 21
<svg> fix Not supported Works in 5 of 21
<table> Works Works in 20 of 21
<textarea> Works Works in 13 of 21
<ul> Partial. Partial Works in 7 of 21
<video> fix The <video> element is supported, but the video can not play due to a strict Content Security Policy. Not supported Works in 3 of 21
<wbr> Works Works in 16 of 21

HTML Attributes · 9 of 22 not supported or partial here

[align] Works Works in 17 of 21
[aria-describedby] Works Works in 9 of 21
[aria-hidden] Works Works in 13 of 21
[aria-label] Works Works in 13 of 21
[aria-labelledby] Buggy. Not supported Works in 7 of 21
[aria-live] Not supported Works in 8 of 21
[background] Works Works in 16 of 21
[cellpadding] Works Works in 18 of 21
[cellspacing] Works Works in 18 of 21
[command] Not supported Works in 3 of 21
[dir] Works Works in 19 of 21
[height] Works Works in 18 of 21
[hidden] Not supported Works in 5 of 21
[lang] Works Works in 15 of 21
[loading] Not supported Works in 4 of 21
[popover] Not supported Works in 3 of 21
[required] Not supported Works in 7 of 21
[role] Works Works in 14 of 21
[srcset] Not supported Works in 4 of 21
[target] Not supported. Not supported Works in 0 of 21
[valign] Works Works in 20 of 21
[width] Works Works in 18 of 21

HTML & Email Structure · 3 of 8 not supported or partial here

amp4email Not supported Works in 6 of 21
anchor-links Works Works in 12 of 21
doctype Works Works in 13 of 21
html-comments Works Works in 18 of 21
html5-semantics Partial. Partial Works in 6 of 21
image-maps Works Works in 15 of 21
mailto-links Works Works in 17 of 21
meta-color-scheme Not supported Works in 2 of 21

CSS At-Rules · 5 of 10 not supported or partial here

@font-face Not supported Works in 6 of 21
@import Not supported Works in 4 of 21
@keyframes Not supported Works in 7 of 21
@media Partial. Partial Works in 5 of 21
@media device-pixel-ratio Works Works in 10 of 21
@media hover Works Works in 9 of 21
@media orientation Works Works in 11 of 21
@media prefers-color-scheme Works Works in 9 of 21
@media prefers-reduced-motion Works Works in 9 of 21
@supports Not supported Works in 9 of 21

Pseudo-Elements · 6 of 6 not supported or partial here

::after Partial. Partial Works in 6 of 21
::before Partial. Partial Works in 6 of 21
::first-letter Partial. Partial Works in 10 of 21
::first-line Partial. Partial Works in 10 of 21
::marker Not supported Works in 10 of 21
::placeholder The pseudo-element is supported but <input> elements are not. Partial Works in 9 of 21

Pseudo-Classes & Selectors · 25 of 34 not supported or partial here

:adjacent-sibling Works Works in 16 of 21
:attribute-selector Partial. Partial Works in 6 of 21
:chaining Buggy. Not supported Works in 14 of 21
:checked Partial. Partial Works in 9 of 21
:child-combinator Works Works in 16 of 21
:class-selector Works Works in 17 of 21
:descendant-combinator Works Works in 17 of 21
:first-child Partial. Partial Works in 12 of 21
:first-of-type Partial. Partial Works in 12 of 21
:focus Partial. Partial Works in 10 of 21
:focus-visible Partial. Partial Works in 6 of 21
:focus-within Not supported Works in 6 of 21
:general-sibling Works Works in 16 of 21
:grouping Works Works in 17 of 21
:has Not supported Works in 5 of 21
:hover Partial. Partial Works in 12 of 21
:id-selector Works Works in 17 of 21
:lang Not supported Works in 6 of 21
:last-child Partial. Partial Works in 12 of 21
:last-of-type Partial. Partial Works in 12 of 21
:link Partial Works in 13 of 21
:not Not supported Works in 6 of 21
:nth-child Not supported Works in 6 of 21
:nth-last-child Not supported Works in 6 of 21
:nth-of-type Not supported Works in 6 of 21
:only-child Partial. Partial Works in 12 of 21
:only-of-type Partial. Partial Works in 12 of 21
:target Partial. Partial Works in 7 of 21
:type-selector Works Works in 17 of 21
:universal-selector Works Works in 16 of 21
:visited Partial. Partial Works in 8 of 21
pseudo-class-active Partial. Partial Works in 8 of 21
pseudo-class-default Works on input[radio] and input[checkbox] only. Partial Works in 10 of 21
pseudo-class-nth-last-of-type Not supported Works in 6 of 21

CSS Functions · 7 of 8 not supported or partial here

calc Not supported Works in 8 of 21
clamp Not supported Works in 6 of 21
conic-gradient Not supported Works in 6 of 21
fit-content Works Works in 11 of 21
linear-gradient Not supported Works in 9 of 21
max Not supported Works in 6 of 21
min Not supported Works in 6 of 21
radial-gradient Not supported Works in 10 of 21

CSS Properties · 60 of 164 not supported or partial here

!important Works Works in 11 of 21
accent-color Not supported Works in 5 of 21
align-items Works Works in 13 of 21
animation fix Not supported Works in 5 of 21
aspect-ratio Not supported Works in 5 of 21
backdrop-filter Not supported Works in 6 of 21
background Works Works in 16 of 21
background-blend-mode Works Works in 13 of 21
background-clip Works Works in 14 of 21
background-color Works Works in 21 of 21
background-image Works Works in 16 of 21
background-origin Works Works in 14 of 21
background-position Works Works in 20 of 21
background-repeat Works Works in 20 of 21
background-size Works Works in 17 of 21
bimi Not supported Works in 9 of 21
block-size Not supported Works in 7 of 21
border Works Works in 20 of 21
border-collapse Works Works in 19 of 21
border-image Not supported Works in 7 of 21
border-inline Not supported Works in 3 of 21
border-inline-individual Not supported Works in 3 of 21
border-inline-longhand Not supported Works in 4 of 21
border-radius Works Works in 16 of 21
border-radius-logical Not supported Works in 3 of 21
border-spacing Works Works in 17 of 21
bottom Works Works in 11 of 21
box-shadow Works Works in 14 of 21
box-sizing Works Works in 16 of 21
caption-side Works Works in 20 of 21
clear Works Works in 9 of 21
clip-path Not supported Works in 8 of 21
color Works Works in 21 of 21
color-scheme Not supported Works in 4 of 21
column-count Works Works in 16 of 21
columns Works Works in 16 of 21
css-comments Works Works in 14 of 21
cursor Not supported Works in 2 of 21
custom-properties Not supported Works in 6 of 21
direction Works Works in 21 of 21
display Works Works in 13 of 21
display:flex Works Works in 18 of 21
display:grid Works Works in 18 of 21
display:none Works Works in 20 of 21
empty-cells Works Works in 14 of 21
filter Not supported Works in 7 of 21
flex Works Works in 13 of 21
flex-basis Works Works in 13 of 21
flex-direction Works Works in 12 of 21
flex-wrap Works Works in 13 of 21
float Works Works in 14 of 21
font Works Works in 20 of 21
font-family Works Works in 21 of 21
font-kerning Works Works in 13 of 21
font-size Works Works in 13 of 21
font-size-adjust Works Works in 10 of 21
font-stretch Works Works in 10 of 21
font-weight Works Works in 16 of 21
gap Partial. Partial Works in 7 of 21
grid-template-columns Not supported Works in 7 of 21
height Works Works in 16 of 21
hyphenate-character Not supported Works in 4 of 21
hyphenate-limit-chars Not supported Works in 1 of 21
hyphens Not supported Works in 4 of 21
inert Not supported Works in 3 of 21
inline-size Not supported Works in 4 of 21
inset Not supported Works in 3 of 21
justify-content Works Works in 13 of 21
left Works Works in 11 of 21
letter-spacing Works Works in 20 of 21
light-dark Not supported Works in 3 of 21
line-height Works Works in 20 of 21
list-style Works Works in 11 of 21
list-style-image Not supported, but image values are supported through the list-style shorthand property. Not supported Works in 6 of 21
list-style-position Works Works in 19 of 21
list-style-type Works Works in 21 of 21
margin Partial. Partial Works in 8 of 21
margin-block-start-end Not supported Works in 4 of 21
margin-inline-block Not supported Works in 6 of 21
margin-inline-start-end Not supported Works in 4 of 21
mask-image Not supported Works in 4 of 21
max-block-size Not supported Works in 5 of 21
max-height Works Works in 20 of 21
max-inline-size Not supported Works in 4 of 21
max-width Works Works in 20 of 21
min-block-size Not supported Works in 4 of 21
min-height Works Works in 19 of 21
min-inline-size Not supported Works in 5 of 21
min-width Works Works in 20 of 21
mix-blend-mode Works Works in 13 of 21
modern-color Not supported Works in 4 of 21
nesting Not supported Works in 2 of 21
object-fit Works Works in 14 of 21
object-position Works Works in 14 of 21
opacity Works Works in 19 of 21
orphans Works Works in 10 of 21
outline Works Works in 20 of 21
outline-offset Not supported Works in 7 of 21
overflow Partial. Partial Works in 4 of 21
overflow-wrap fix Not supported Works in 2 of 21
padding Works Works in 20 of 21
padding-block-start-end Not supported Works in 4 of 21
padding-inline-block Not supported Works in 3 of 21
padding-inline-start-end Not supported Works in 4 of 21
position Partial. Partial Works in 2 of 21
resize resize property is stripped from style tag Not supported Works in 1 of 21
rgb Works Works in 12 of 21
rgba Works Works in 12 of 21
right Works Works in 11 of 21
scroll-snap Not supported Works in 6 of 21
shape-margin Not supported Works in 6 of 21
shape-outside Not supported Works in 6 of 21
system-ui Works Works in 12 of 21
tab-size Works Works in 8 of 21
table-layout Works Works in 16 of 21
text-align Works Works in 13 of 21
text-align-last Not supported Works in 7 of 21
text-decoration Works Works in 14 of 21
text-decoration-color Works Works in 17 of 21
text-decoration-line Works Works in 16 of 21
text-decoration-skip-ink Not supported Works in 7 of 21
text-decoration-style Works Works in 16 of 21
text-decoration-thickness Not supported Works in 7 of 21
text-emphasis Works Works in 9 of 21
text-emphasis-position Not supported Works in 4 of 21
text-indent Works Works in 13 of 21
text-justify Partial. Partial Works in 0 of 21
text-orientation Works Works in 13 of 21
text-overflow Works Works in 13 of 21
text-shadow Works Works in 12 of 21
text-transform Works Works in 20 of 21
text-underline-offset Not supported Works in 7 of 21
text-underline-position Works Works in 8 of 21
text-wrap Not supported Works in 4 of 21
top Works Works in 11 of 21
transform fix Not supported Works in 7 of 21
transition Not supported Works in 4 of 21
unit-ch Works Works in 15 of 21
unit-cm Works Works in 20 of 21
unit-em Works Works in 20 of 21
unit-ex Works Works in 20 of 21
unit-in Works Works in 20 of 21
unit-initial Works Works in 12 of 21
unit-mm Works Works in 20 of 21
unit-pc Works Works in 20 of 21
unit-percent Works Works in 20 of 21
unit-pt Works Works in 20 of 21
unit-px Works Works in 20 of 21
unit-rem Works Works in 15 of 21
unit-vh Works Works in 17 of 21
unit-vmax Works Works in 15 of 21
unit-vmin Works Works in 15 of 21
unit-vw Works Works in 18 of 21
user-select Property is stripped from style tag Not supported Works in 3 of 21
vertical-align Works Works in 21 of 21
visibility Works Works in 13 of 21
white-space Works Works in 15 of 21
white-space-collapse Not supported Works in 4 of 21
widows Works Works in 10 of 21
width Works Works in 20 of 21
word-break Buggy. Partial Works in 4 of 21
word-spacing Works Works in 14 of 21
writing-mode Works Works in 13 of 21
z-index Works Works in 17 of 21

How Outlook 365 renders email

Outlook on the web (Outlook.com and Microsoft 365 in the browser) renders email in the browser rather than with Microsoft Word, so it supports far more than Outlook Classic: <style> blocks, flexbox, grid, border-radius, background images and dark-mode media queries all work. Its gaps are web fonts, forms that submit, and nested media queries.

@font-face: Not supported. A web font never loads here, so the fallback in your font stack is what readers see.
Forms: Inputs and selects render, but the form does not submit its values. Interactive email that depends on a submit will not work.
Nested media queries: Removed. Keep media queries flat; one nested inside another is dropped.

Conditional comments (<!--[if mso]>) are read only by Outlook Classic's Word engine. Outlook on the web ignores them, which is what lets one template carry Word-specific fixes without affecting this client.
position is only partly supported and transform not at all, so overlays and rotated elements need a static design underneath.
Because the new Outlook for Windows is built on Outlook on the web, a check here is also the best available guide to how the new Windows app will render.