Skip to main content

Our email CSS engine is open source. Give it a star on GitHub 

Emailens
Sign in

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

179 of 300 features work in Outlook Android · 18 partial · 102 not supported · 1 untested. Its closest client, Outlook iOS, agrees on 270 of the 296 features both are tested on.

Works 179 · Partial 18 · Not supported 102 · Untested 1 · of 300

Outlook Mobile · mobile · prefers-color-scheme: works

The checker needs a computer screen.
See what breaks ↓

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

What we measured in real Outlook Android

  • Since November 2026 we capture real Outlook for Android on an Android emulator in our own worker.
  • The app holds back images from a sender it does not know until the reader taps Download images (November 2026).

How we check the preview against real clients →

Outlook Android against Outlook iOS

They give the same answer on 270 of the 296 features both are tested on. Where they split:

Works in Outlook Android, not in Outlook iOS (7)

Works in Outlook iOS, not in Outlook Android (12)

All 12

How Outlook Android renders email

Outlook for Android renders with Microsoft's mobile engine, not with Word, so almost none of Outlook Classic's limits apply here. Its closest client is Outlook for iOS. The two split on forms, flex-direction, pseudo-elements and hover, listed at the top of this page.

::before and ::after
Unsupported on Android, where iOS and Outlook on the web support them partly. Decoration built from pseudo-elements, such as custom bullets or quote marks, disappears here.
<input type="text"> and <textarea>
Supported in Outlook for iOS and Outlook on the web but not on Android. A form with a text field reaches Android readers without its field.
flex-direction
Unsupported on Android, supported on iOS. A row that flips to a column on mobile with flex-direction stays a row here; stack with table cells instead.
:hover and :focus
Supported on Android and not on iOS. Treat them as a bonus either way: on a touch screen there is no resting hover state to rely on.
position
Only sticky is supported. relative, absolute and fixed are not, so an overlay or a badge positioned over an image falls back into normal flow.
box-shadow
Supported, as in Outlook for iOS, Outlook on the web, Outlook (New) and Outlook for Mac. Outlook Classic does not draw it, so a card whose edge is only a shadow loses its edge there.
Dark mode attributes
In dark mode the app adds data-ogsc, data-ogac, data-ogsb and data-ogab attributes to the email's elements, which a <style> rule can select.

What to write instead

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

visibility

The fix for Outlook Android

Use conditional comments or remove hidden content

after 
<!-- For screen readers, use font-size: 0 trick -->
<div style="font-size: 0; max-height: 0; overflow: hidden;
            mso-hide: all;" aria-hidden="true">
  Preheader text
</div>
Show the original
before 
<div style="visibility: hidden;">
  Hidden content for screen readers
</div>

The checker needs a computer screen.

transform

The fix for Outlook Android

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 Android shows a broken image instead.

after 
<!-- 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 
<div style="transform: rotate(45deg);">
  Rotated content
</div>

The checker needs a computer screen.

<svg>

The fix for Outlook Android

Convert inline SVG to an image for email compatibility

after 
<img src="https://example.com/icon.png"
  width="24" height="24" alt="Icon"
  style="display: block; border: 0;" />
Show the original
before 
<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="#6d28d9"/>
</svg>

The checker needs a computer screen.

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

The checker needs a computer screen.

Dark mode in Outlook Android

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

How to target Outlook Android

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

css 
[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.

No longer works (1)
css 
body[data-outlook-cycle] .your-class-name {
  /* Replace this comment with your styles */
}

Build one for several clients →

Before you send to Outlook Android

  • Check the mobile layout here rather than assuming Outlook Classic's result applies. The two share a brand, not an engine.
  • If the email uses a form field or pseudo-element decoration, check Android separately from iOS: those are where the two apps split.
  • Give every image alt text: a first email from you opens with its images held back.

Your next question

Outlook iOS · Outlook 365 · Outlook Classic

Every feature in Outlook Android

Show all 300
Show

HTML Elements · 14 of 48 not supported or partial here

HTML Attributes · 7 of 22 not supported or partial here

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

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

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

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

CSS Functions · 8 of 8 not supported or partial here

CSS Properties · 67 of 164 not supported or partial here

Get new email CSS fixes by email.

caniemail (MIT) via @emailens/engine 0.18.22 · data last changed 10 Nov 2026