Outlook 365
Outlook 365 (web) has significantly better CSS support than Outlook on Windows. It uses a modern rendering engine rather than Microsoft Word, supporting most CSS properties including some flex layouts. However, it still strips certain properties and has its own sanitization quirks.
The primary email client for Microsoft 365 subscribers accessing email via the web. Widely used in enterprise and education environments.
CSS coverage profile for Outlook 365
Outlook 365 renders with the Outlook Web engine and supports 166 of 298 tracked CSS and HTML features fully, with 34 partially supported and 98 unsupported. That places it in a moderate coverage band.
A meaningful portion of CSS is unsupported or partially supported. Plan fallbacks for layout-critical features and validate every template before send.
166
Supported
34
Partial
98
Unsupported
298
Total
Key gotchas in Outlook 365
background-image (on some elements) Background images work on <td> and <div> but can be stripped on other elements. Test explicitly.
Custom fonts (@font-face) Outlook 365 supports @font-face but may fall back to system fonts in some configurations.
form elements Interactive form elements (<input>, <select>, <button>) are stripped for security reasons.
How Outlook 365 renders email
- Outlook 365 web is effectively a modern browser environment, so most CSS that works in a current Chrome version also works here. Layout systems like flex are honoured, with caveats around form elements.
- Microsoft injects [data-ogsc] / [data-ogsb] dark-mode attributes onto elements when the user has dark mode active. Use these attribute selectors to override colour decisions without affecting other clients.
- Conditional comments (<!--[if mso]>) target only the desktop Word renderer , Outlook 365 web ignores them, which is exactly what you want for shared codepaths between modern and legacy Outlook.
- Custom fonts via @font-face load successfully, but enterprise Office configurations occasionally restrict font fetches by network policy , supply a strong fallback stack regardless.
Dark mode behaviour in Outlook 365
Outlook 365 has robust dark mode support with automatic color inversion. It respects the color-scheme meta tag and applies intelligent inversions. However, it may override explicit background colors , use both CSS and the bgcolor HTML attribute.
QA checklist for Outlook 365
- Test in light and Outlook's user-toggle dark mode , color overrides applied via data-ogsc selectors only activate in the dark branch.
- Verify any <form>-based interactive content gracefully degrades , Outlook 365 strips inputs for security.
- Spot-check enterprise tenants where IT policy may block external resources; design for an offline-friendly first paint.
Related clients
Breaks here, works nearly everywhere else
1 feature that Outlook 365 drops while most other clients render it. This is usually what is behind an email that looks correct everywhere but here.
Renders here, dropped almost everywhere else
Safe in Outlook 365 and almost nowhere else, so it needs a fallback the moment the send is not Outlook 365-only.
Where Outlook 365 is weakest
- CSS Properties 61
- Pseudo-Classes & Selectors 25
- HTML Elements 16
- HTML Attributes 9
- CSS Functions 7
Closest client: Outlook iOS
Outlook iOS agrees with Outlook 365 on 91% of verified features. They still differ on 28: <button type="reset">, <form>, <input type="submit">, <marquee>, [aria-labelledby], [required], and 22 more.
Side by side
HTML Elements48
| Feature | Support |
|---|---|
| <abbr> | Supported |
| <acronym> | Supported |
| <address> | Supported |
| <audio> | Unsupported |
| <base> | Partial |
| <bdi> | Unsupported |
| <blockquote> | Supported |
| <body> | Partial |
| <button type="reset"> | Supported |
| <button type="submit"> | Unsupported |
| <code> | Supported |
| <del> | Supported |
| <dfn> | Supported |
| <dialog> | Unsupported |
| <div> | Supported |
| <form> | Partial |
| <h1> | Supported |
| <hr> | Supported |
| <img> | Supported |
| <input type="checkbox"> | Supported |
| <input type="hidden"> | Supported |
| <input type="radio"> | Supported |
| <input type="reset"> | Supported |
| <input type="submit"> | Unsupported |
| <input type="text"> | Supported |
| <link> | Unsupported |
| <marquee> | Partial |
| <meter> | Supported |
| <object> | Unsupported |
| <p> | Supported |
| <picture> | Unsupported |
| <pre> | Supported |
| <progress> | Unsupported |
| <rp> | Supported |
| <rt> | Supported |
| <ruby> | Supported |
| <select> | Supported |
| <small> | Supported |
| <span> | Supported |
| <strike> | Supported |
| <strong> | Supported |
| <style> | Supported |
| <svg> | Unsupported |
| <table> | Supported |
| <textarea> | Supported |
| <ul> | Partial |
| <video> | Unsupported |
| <wbr> | Supported |
HTML Attributes22
| Feature | Support |
|---|---|
| [align] | Supported |
| [aria-describedby] | Supported |
| [aria-hidden] | Supported |
| [aria-label] | Supported |
| [aria-labelledby] | Unsupported |
| [aria-live] | Unsupported |
| [background] | Supported |
| [cellpadding] | Supported |
| [cellspacing] | Supported |
| [command] | Unsupported |
| [dir] | Supported |
| [height] | Supported |
| [hidden] | Unsupported |
| [lang] | Supported |
| [loading] | Unsupported |
| [popover] | Unsupported |
| [required] | Unsupported |
| [role] | Supported |
| [srcset] | Unsupported |
| [target] | Unsupported |
| [valign] | Supported |
| [width] | Supported |
HTML & Email Structure8
| Feature | Support |
|---|---|
| amp4email | Unsupported |
| anchor-links | Supported |
| doctype | Supported |
| html-comments | Supported |
| html5-semantics | Partial |
| image-maps | Supported |
| mailto-links | Supported |
| meta-color-scheme | Unsupported |
CSS At-Rules10
| Feature | Support |
|---|---|
| @font-face | Unsupported |
| @import | Unsupported |
| @keyframes | Unsupported |
| @media | Partial |
| @media device-pixel-ratio | Supported |
| @media hover | Supported |
| @media orientation | Supported |
| @media prefers-color-scheme | Supported |
| @media prefers-reduced-motion | Supported |
| @supports | Unsupported |
Pseudo-Elements6
| Feature | Support |
|---|---|
| ::after | Partial |
| ::before | Partial |
| ::first-letter | Partial |
| ::first-line | Partial |
| ::marker | Unsupported |
| ::placeholder | Partial |
Pseudo-Classes & Selectors34
| Feature | Support |
|---|---|
| :adjacent-sibling | Supported |
| :attribute-selector | Partial |
| :chaining | Unsupported |
| :checked | Partial |
| :child-combinator | Supported |
| :class-selector | Supported |
| :descendant-combinator | Supported |
| :first-child | Partial |
| :first-of-type | Partial |
| :focus | Partial |
| :focus-visible | Partial |
| :focus-within | Unsupported |
| :general-sibling | Supported |
| :grouping | Supported |
| :has | Unsupported |
| :hover | Partial |
| :id-selector | Supported |
| :lang | Unsupported |
| :last-child | Partial |
| :last-of-type | Partial |
| :link | Partial |
| :not | Unsupported |
| :nth-child | Unsupported |
| :nth-last-child | Unsupported |
| :nth-of-type | Unsupported |
| :only-child | Partial |
| :only-of-type | Partial |
| :target | Partial |
| :type-selector | Supported |
| :universal-selector | Supported |
| :visited | Partial |
| pseudo-class-active | Partial |
| pseudo-class-default | Partial |
| pseudo-class-nth-last-of-type | Unsupported |
CSS Functions8
| Feature | Support |
|---|---|
| calc | Unsupported |
| clamp | Unsupported |
| conic-gradient | Unsupported |
| fit-content | Supported |
| linear-gradient | Unsupported |
| max | Unsupported |
| min | Unsupported |
| radial-gradient | Unsupported |
CSS Properties162
Test your email in Gmail, Outlook and Apple Mail
Preview rendering, catch CSS issues, and see what Outlook does to your VML. Free, no account. All 21 clients with one.
Instant live preview · No signup required · 21 email engines
Support data last updated Sep 2, 2026 - synced from caniemail.com (MIT) via @emailens/engine.