Skip to main content

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

Emailens

AOL Mail email CSS: what breaks, and what to write instead

111 of 300 features work in AOL Mail · 28 partial · 159 not supported · 2 untested. Of the 159 not supported, 20 work in at least 14 of the other 20 clients.

Works 111 · Partial 28 · Not supported 159 · Untested 2 · of 300

AOL · webmail · prefers-color-scheme: not supported

The checker needs a computer screen.

See what breaks ↓

AOL Mail 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 AOL Mail is the outlier

20 features work in at least 14 of the other 20 clients and are not supported here.

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

All 20

What to write instead

12 features AOL Mail does not fully support have a written fix. See them in the table ↓

box-sizing

The fix for AOL Mail

Account for padding in width manually (no box-sizing)

after
<div style="width: 300px;">
  <div style="padding: 20px;">
    Content; padding on inner element
  </div>
</div>
Show the original
before
<div style="width: 300px; padding: 20px;
            box-sizing: border-box;">
  Content; total width stays 300px
</div>

The checker needs a computer screen.

opacity

The fix for AOL Mail

Replace opacity with solid color equivalents

after
.overlay {
  /* Use a semi-transparent color instead of opacity */
  background-color: #808080;
  /* Or for modern clients: rgba(0, 0, 0, 0.5) */
}
Show the original
before
.overlay {
  background-color: #000;
  opacity: 0.5;
}

The checker needs a computer screen.

visibility

The fix for AOL Mail

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.

Paste your email and see what AOL Mail does to it.

The checker needs a computer screen.

Dark mode in AOL Mail

Every feature in AOL Mail

Show

HTML Elements · 17 of 48 not supported or partial here

HTML Attributes · 14 of 22 not supported or partial here

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

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

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

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

CSS Functions · 8 of 8 not supported or partial here

CSS Properties · 117 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