Outlook Email CSS Compatibility Guide for 2026

Outlook Desktop ignores max-width entirely. If your email layout depends on max-width to constrain a container, Outlook will render it at full width (typically 100% of the viewport), breaking your layout.

Fix: Use a fixed-width table as the outer container. Set the width attribute on the table element, not just CSS.

<!-- Works in all clients including Outlook Desktop -->
<table role="presentation" width="600" cellpadding="0"
       cellspacing="0" border="0"
       style="max-width:600px; width:100%;">
  <tr>
    <td style="padding: 20px;">
      Your email content here
    </td>
  </tr>
</table>

Outlook Desktop does not support CSS background-image on any element. Your carefully crafted hero section with a background image will show a blank area or just the background-color fallback.

Fix: Use VML (Vector Markup Language) inside Outlook conditional comments. The VML fill element renders a background image in Word's engine.

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml"
        fill="true" stroke="false"
        style="width:600px; height:300px;">
  <v:fill type="frame"
          src="https://example.com/hero-bg.jpg"
          color="#1a1a2e" />
  <v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url('https://example.com/hero-bg.jpg');
            background-color: #1a1a2e;
            background-size: cover;
            max-width: 600px;
            height: 300px;">
  <p style="color: #ffffff; padding: 40px;">
    Hero text content here
  </p>
</div>

<!--[if mso]>
  </v:textbox>
</v:rect>
<![endif]-->

Outlook Desktop ignores border-radius on all elements. Rounded buttons, rounded image containers, and pill-shaped badges all render with sharp 90-degree corners.

Fix: For CTA buttons specifically, use VML v:roundrect to render rounded corners in Outlook. Other clients use the standard CSS.

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
             xmlns:w="urn:schemas-microsoft-com:office:word"
             href="https://example.com/cta"
             style="height:44px; v-text-anchor:middle; width:200px;"
             arcsize="14%"
             strokecolor="#0066cc"
             fillcolor="#0066cc">
  <w:anchorlock/>
  <center style="color:#ffffff; font-family:Arial,sans-serif;
                  font-size:14px; font-weight:bold;">
    Shop Now
  </center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="https://example.com/cta"
   style="display:inline-block; background:#0066cc;
          color:#ffffff; font-family:Arial,sans-serif;
          font-size:14px; font-weight:bold;
          text-decoration:none; padding:12px 32px;
          border-radius:6px;">
  Shop Now
</a>
<!--<![endif]-->

Outlook Desktop does not support display:flex or display:grid. Elements using these layouts will stack vertically or render in an unpredictable order, breaking multi-column designs.

Fix: Use table-based layouts for any multi-column structure. Tables are universally supported across all email clients including Outlook Desktop.

<!-- Instead of flexbox/grid, use tables for columns -->
<table role="presentation" width="600" cellpadding="0"
       cellspacing="0" border="0">
  <tr>
    <!-- Left column -->
    <td width="290" valign="top" style="padding-right:10px;">
      <p>Column 1 content</p>
    </td>
    <!-- Right column -->
    <td width="290" valign="top" style="padding-left:10px;">
      <p>Column 2 content</p>
    </td>
  </tr>
</table>

<!-- For responsive stacking on mobile, add: -->
<!--
@media screen and (max-width: 600px) {
  td[class="column"] {
    display: block !important;
    width: 100% !important;
  }
}
-->

Outlook Desktop has partial support for margin and padding. Margin on block-level elements (like divs and paragraphs) is unreliable. Padding works on table cells but can behave unexpectedly on other elements. Negative margins are ignored entirely.

Fix: Use padding on table cells instead of margins. For spacing between sections, use empty table rows with a fixed height.

<!-- Reliable spacing in Outlook -->
<table role="presentation" width="600" cellpadding="0"
       cellspacing="0" border="0">
  <tr>
    <td style="padding: 20px 30px;">
      Content with padding (works in Outlook)
    </td>
  </tr>

  <!-- Spacer row instead of margin -->
  <tr>
    <td height="20" style="font-size:0; line-height:0;">
      &nbsp;
    </td>
  </tr>

  <tr>
    <td style="padding: 20px 30px;">
      Next section
    </td>
  </tr>
</table>

Outlook Desktop has partial support for the display property. Using display:none in a style block may not reliably hide elements. Outlook can also ignore display:none inside media queries, which breaks the common pattern of hiding content on desktop versus mobile.

Fix: Use inline display:none or a combination of mso-hide:all, overflow:hidden, and zero-height techniques for Outlook.

<!-- Method 1: Inline style (most reliable) -->
<div style="display:none; mso-hide:all; max-height:0;
            overflow:hidden; font-size:0; line-height:0;">
  Hidden preheader text goes here
</div>

<!-- Method 2: Outlook-specific hiding -->
<!--[if !mso]><!-->
<div style="display:none;">
  Content hidden from non-Outlook clients
</div>
<!--<![endif]-->

<!-- Method 3: Show only in Outlook -->
<!--[if mso]>
<p>This content is only visible in Outlook Desktop</p>
<![endif]-->