Supported Email CSS/Styling Guide

Not all mail clients are designed equally. As such, many will enforce their own styling parameters or will support/not support certain CSS styling elements commonly used on the web. 

Here's a breakdown of some of the most common styling elements and which mail clients support them:

  Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2016)
CSS Background Property
background-color yes.png yes.png yes.png yes.png yes.png yes.png yes.png
background-
image
no.png yes.png yes.png yes.png yes.png yes.png no.png
background-position no.png no.png yes.png yes.png yes.png yes.png no.png
background-repeat yes.png yes.png yes.png yes.png yes.png yes.png no.png
background-size yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Box and Border Property
border yes.png yes.png yes.png yes.png yes.png yes.png yes.png
border-image no.png yes.png yes.png yes.png yes.png yes.png no.png
border-radius yes.png yes.png yes.png yes.png yes.png yes.png no.png
box-shadow yes.png yes.png yes.png yes.png yes.png yes.png no.png
height yes.png yes.png yes.png yes.png yes.png yes.png no.png
width yes.png yes.png yes.png yes.png yes.png yes.png no.png
max-width yes.png yes.png yes.png yes.png yes.png yes.png no.png
min-width yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Media Queries
@media no.png yes.png yes.png yes.png yes.png yes.png no.png
(max-device-width) no.png yes.png yes.png yes.png yes.png yes.png no.png
(min-pixel-width) no.png yes.png yes.png yes.png yes.png yes.png no.png
(max-width) no.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Positioning and Visibility
margin yes.png yes.png yes.png yes.png yes.png yes.png yes.png
padding yes.png yes.png yes.png yes.png yes.png yes.png no.png

position:absolute

yes.png yes.png yes.png yes.png yes.png yes.png no.png
position:fixed yes.png yes.png yes.png yes.png yes.png yes.png no.png
z-index yes.png yes.png yes.png yes.png yes.png yes.png no.png
visibility:hidden yes.png yes.png yes.png yes.png yes.png yes.png no.png
display:none yes.png yes.png yes.png yes.png yes.png yes.png no.png
overflow:none yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Text Property
@font-face no.png yes.png no.png yes.png yes.png yes.png no.png
direction yes.png yes.png yes.png yes.png yes.png yes.png no.png
font yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-family yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-style yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-variant yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-size yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-weight yes.png yes.png yes.png yes.png yes.png yes.png no.png
letter-spacing yes.png yes.png yes.png yes.png yes.png yes.png no.png
line-height yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-align yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-decoration yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-indent yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-overflow yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-shadow yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-transform yes.png yes.png yes.png yes.png yes.png yes.png no.png
white-space yes.png yes.png yes.png yes.png yes.png yes.png no.png
word-spacing yes.png yes.png yes.png yes.png yes.png yes.png no.png
word-wrap yes.png yes.png yes.png yes.png yes.png yes.png no.png
vertical-align yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-fill-color yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-stroke yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Table Property
border-collapse yes.png yes.png yes.png yes.png yes.png yes.png no.png
border-spacing yes.png yes.png yes.png yes.png yes.png yes.png no.png
empty-cells yes.png yes.png yes.png yes.png yes.png yes.png no.png
HTML
<audio> no.png no.png yes.png no.png yes.png no.png no.png
<canvas> no.png no.png yes.png no.png yes.png no.png no.png
<iframe> no.png no.png no.png no.png no.png yes.png no.png
<img srcset> no.png no.png no.png no.png yes.png yes.png no.png
<picture> no.png no.png no.png no.png no.png yes.png no.png
<video> no.png no.png yes.png no.png no.png no.png yes.png
Link Element
<link> in <head> no.png no.png yes.png yes.png yes.png yes.png yes.png
<link> in <body> no.png no.png yes.png yes.png yes.png yes.png yes.png
Style Element
<style> in <head> yes.png yes.png yes.png yes.png yes.png yes.png yes.png
<style> in <body> yes.png no.png yes.png no.png yes.png yes.png yes.png
Have more questions? Submit a request

Comments