Fix border-radius, Gradients and object-fit in Outlook

Why these properties fail in Outlook

Outlook Classic renders email with Microsoft Word, which drops CSS it does not know without a warning. The Outlook CSS support guide explains the engine and lists what it does with each property; this page is the fixes.

border-radius in Outlook: VML roundrect or square corners

border-radius is not supported in Outlook Classic. The per-client support is in the border-radius email compatibility report. For call-to-action buttons you have two options:

• Let it degrade. Apply border-radius: 6px to a styled <td> or <a>. Modern clients round the corners; Outlook shows a clean square box, and you write no VML.
• Draw it with VML. If the brand needs rounded pill buttons in Outlook too, wrap a <v:roundrect> in MSO conditional comments and give every other client the CSS link.

<!-- Rounded button: VML for Outlook Classic, CSS for everyone else -->
<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>

The arcsize="14%" attribute sets the corner radius in VML. You can try variations of this pattern in the free bulletproof button generator. Do not put a VML button inside a VML background image: see background images in Outlook for what that breaks.

linear-gradient in Outlook: solid colour first, VML gradient second

linear-gradient is not supported in Outlook Classic. The full matrix is in the linear-gradient compatibility data. The most common mistake is writing the gradient in the background shorthand:

/* Outlook Classic drops this whole declaration */
background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);

Because Word does not recognise linear-gradient, it throws away the whole background declaration, colour included, and the cell renders transparent or white. Declare a solid colour first, in its own property:

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

If the gradient has to show in Outlook too, for a hero header say, draw it with VML's <v:fill type="gradient">:

<!-- Linear gradient: solid colour first, VML gradient for Outlook Classic -->
<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>

object-fit in Outlook: crop the image, not the box

object-fit: cover is how the web keeps an image's aspect ratio in a box of any size. object-fit is not supported in Outlook Classic. The per-client support is in the object-fit email client report.

When an email sets width: 100%; height: 200px; object-fit: cover;, Outlook ignores object-fit, forces the image into the 200px height and stretches it to the full width, squashing portraits and logos. Three habits prevent it:

• Crop on the server. Serve images from your CDN already cropped to the 16:9, 4:3 or 1:1 ratio the template shows.
• Use height: auto. Never set a fixed CSS height on an image unless its natural aspect ratio matches those exact pixel dimensions.
• Constrain the cell, not the image. Set the height on the parent <td> with mso-line-height-rule: exactly and overflow: hidden:

<!-- object-fit fallback: a fixed-size cell around a pre-cropped image -->
<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;">
      <!-- Width only: the cell holds the height, the file sets the ratio -->
      <img src="https://emailens.dev/images/sample-card.jpg"
           width="280"
           alt="Preview"
           style="display: block; width: 100%; max-width: 280px; height: auto; object-fit: cover; border: 0;" />
    </td>
  </tr>
</table>

border-collapse in Outlook and the 1px line bug

border-collapse works in Outlook Classic. The trouble is around it: tables without explicit spacing attributes get inconsistent cell borders and 1px gaps. Add cellpadding="0" cellspacing="0" border="0" to the table and border-collapse: collapse to its style. The border-collapse page has the support in every client.

Thin horizontal lines across table columns are a separate Outlook bug, caused by Windows display scaling such as 125% or 150% on high-resolution monitors. Keep every font-size and line-height an even whole number of pixels, and set border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; on every table. What the mso- properties do is in MSO conditional comments and mso- CSS.

Other Outlook CSS traps and their fixes