Outlook CSS Fallbacks: Fixing Border-Radius, Gradients, and Object-Fit

1. The Root Cause: Microsoft Word's Print-Layout Engine

Unlike web browsers or mobile mail apps that run on WebKit or Chromium, Classic Outlook for Windows parses HTML through Microsoft Word's Rich Text / HTML export filter (MSO). Word was engineered for printable office documents, not the modern Cascading Style Sheets (CSS3) specification.

When Word encounters properties like border-radius or modern CSS functions like linear-gradient(), it silently discards them during layout tokenization. To make matters worse, if a CSS property declaration lacks a safe fallback, Outlook may drop the entire style block or paint the container transparent.

Let's examine how to implement bulletproof fallbacks for the three most common CSS casualties.

2. Fixing Border-Radius: The VML Roundrect vs. Graceful Square

As documented in our border-radius email compatibility report, Outlook Windows is the only major client that refuses to render rounded corners natively.

You have two architectural options for call-to-action (CTA) buttons:

Approach A: Graceful Degradation

Apply standard border-radius: 6px to a styled <td> or <a>. Modern clients render smooth rounded corners; Outlook displays a clean, professional square box without bloating code with VML.

Approach B: Pixel-Perfect VML

If brand guidelines strictly mandate rounded pill buttons in Outlook, wrap a <v:roundrect> shape inside MSO conditional comments.

bulletproof-vml-button.htmlVML + CSS3

<!-- Bulletproof Rounded Button for Outlook Windows & Modern Clients -->
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td align="center" style="border-radius: 6px;" bgcolor="#0284c7">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
                   xmlns:w="urn:schemas-microsoft-com:office:word" 
                   href="https://emailens.dev" 
                   style="height:44px;v-text-anchor:middle;width:200px;" 
                   arcsize="14%" 
                   stroke="f" 
                   fillcolor="#0284c7">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:sans-serif;font-size:15px;font-weight:bold;">
          Verify Email &rarr;
        </center>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="https://emailens.dev"
         style="background-color:#0284c7;border-radius:6px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:15px;font-weight:bold;line-height:44px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">
        Verify Email &rarr;
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>

Notice the arcsize="14%" parameter: this controls the corner radius curvature in VML. You can test variations of this pattern using our free Bulletproof Button Generator.

3. Fixing Linear Gradients: Solid Color Fallbacks & VML Gradient Fills

According to our linear-gradient compatibility data, Outlook Windows completely disregards CSS gradient functions.

The single biggest mistake developers make is writing:

background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);

Because Word does not recognize linear-gradient, it invalidates the entire shorthand background property, leaving the background completely transparent or stark white.

Rule 1: Always declare a solid background color first.

background-color: #0f172a; /* Outlook fallback */
background-image: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);

If an actual visual gradient is mandatory for hero headers in Outlook, utilize VML's native <v:fill type="gradient">:

outlook-vml-gradient.htmlVML Gradient

<!-- Bulletproof Linear Gradient Hero for Outlook & Modern Clients -->
<!-- 1. Declare solid background-color FIRST as base fallback -->
<td style="background-color: #0f172a; background-image: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" 
          fill="true" 
          stroke="false" 
          style="width:600px;height:240px;">
    <v:fill type="gradient" 
            color1="#1e3a8a" 
            color2="#0f172a" 
            angle="135" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding: 40px 24px; text-align: center; color: #ffffff;">
    <h1 style="font-size: 24px; font-weight: bold; margin: 0;">Welcome to Emailens</h1>
    <p style="font-size: 14px; margin-top: 8px;">Accurate client rendering tests across 21 engines.</p>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

4. Fixing Object-Fit: Solving Image Distortions in Outlook

In responsive web development, object-fit: cover is the gold standard for maintaining image aspect ratios across variable viewport widths. However, as detailed in our object-fit email client report, Outlook ignores this property completely.

When an email sets width: 100%; height: 200px; object-fit: cover;, Outlook ignores object-fit and forces the image into the 200px height while stretching width to 100%, squishing or warping portraits and logos.

Here is the standard 3-tier defense against image distortion:

Server-Side Pre-Cropping: Deliver images from your CDN already cropped to the exact 16:9, 4:3, or 1:1 aspect ratio required by your template.
Fluid Aspect Ratio Height (height: auto): Never set a fixed CSS height on an image unless its natural aspect ratio matches those exact pixel dimensions.
Table Cell Clipping Container: Constrain height on the parent <td> using mso-line-height-rule: exactly and overflow: hidden:

image-aspect-container.htmlTable Container

<!-- Container-Based Image Cropping for Outlook & Modern Clients -->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td align="center" style="width: 280px; height: 180px; overflow: hidden; max-height: 180px; mso-line-height-rule: exactly; line-height: 0;">
      <!-- Explicit width and height constrain Outlook Word engine -->
      <img src="https://emailens.dev/images/sample-card.jpg" 
           width="280" 
           height="180" 
           alt="Preview" 
           style="display: block; width: 100%; max-width: 280px; height: auto; object-fit: cover; border: 0;" />
    </td>
  </tr>
</table>

5. Quick Reference: Other Common Outlook CSS Traps

CSS Property	Outlook Windows Behavior	Bulletproof Workaround
border-collapse	Inconsistent cell borders and 1px gaps	Add `cellpadding="0" cellspacing="0" border="0"` to table HTML attributes + `border-collapse: collapse` in style. See border-collapse guide.
max-width	Ignored; table expands to full window width	Wrap columns in MSO conditional ghost tables. See our Outlook ghost tables guide.
display: flex	Ignored; elements stack vertically	Use fluid-hybrid `display: inline-block` with table cells.

Related Outlook & Rendering Guides

The Complete Outlook CSS Guide →

Master the Microsoft Word rendering engine, DPI scaling, and MSO conditional rules.

Outlook Ghost Tables & Fluid Hybrid Layout →

Solve multi-column collapse issues across desktop and mobile inboxes.

Frequently Asked Questions

Why does Outlook on Windows ignore border-radius and linear-gradient?

Classic Outlook on Windows (2007 through 2021 and Microsoft 365 desktop) relies on Microsoft Word's print-layout rendering engine instead of a modern browser engine like Chromium or WebKit. Word's HTML filter does not recognize CSS3 specifications, stripping border-radius, background linear-gradient, and object-fit entirely.

Does the New Outlook for Windows support border-radius and object-fit?

Yes. The New Outlook for Windows runs on Edge WebView2 (Chromium) and natively supports modern CSS including border-radius, linear-gradient, and flexbox. However, enterprise organizations and commercial clients will continue running Classic Outlook desktop until at least 2029, making fallbacks mandatory.

Will VML code break rendering on Apple Mail, Gmail, or mobile clients?

No. When wrapped properly in conditional comments (), non-Outlook clients treat VML as standard HTML comments and ignore it completely. Modern mobile and web clients execute the standard CSS fallback declared on the parent element.