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 137 of 251 tracked CSS and HTML features fully, with 31 partially supported and 83 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.
137
Supported
31
Partial
83
Unsupported
251
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 elementsInteractive 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
HTML Elements40
| Feature | Support |
|---|---|
| <abbr> | Supported |
| <acronym> | Supported |
| <address> | Supported |
| <audio> | Unsupported |
| <base> | Partial |
| <bdi> | Unsupported |
| <blockquote> | Supported |
| <body> | Partial |
| <code> | Supported |
| <del> | Supported |
| <dfn> | Supported |
| <dialog> | Unsupported |
| <div> | Supported |
| <form> | Partial |
| <h1> | Supported |
| <hr> | Supported |
| <img> | 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 |
CSS At-Rules5
| Feature | Support |
|---|---|
| @font-face | Unsupported |
| @import | Unsupported |
| @keyframes | Unsupported |
| @media | Supported |
| @supports | Unsupported |
Pseudo-Elements6
| Feature | Support |
|---|---|
| ::after | Partial |
| ::before | Partial |
| ::first-letter | Partial |
| ::first-line | Partial |
| ::marker | Unsupported |
| ::placeholder | Partial |
Pseudo-Classes & Selectors32
| 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 |
| :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 Properties160
Test your email across all 15 clients
Preview rendering, catch CSS issues, and get actionable fixes — free.
Try Emailens FreeSupport data last updated Apr 27, 2026 · synced from caniemail.com via @emailens/engine.