Only inline CSS and table-based layout are fully supported across all email clients, including Outlook.

This document explains:

• What is supported

• What is not supported

• Why warnings appear

• How to resolve each warning

• Best practices for creating fully compatible HTML email templates

1. Why These Rules Are Required

Microsoft Outlook (Windows Desktop versions) uses the Microsoft Word rendering engine, not a browser engine.

Because of this:

• Modern CSS has limited or no support

• Many layout techniques break

• Some properties are ignored entirely

Following the rules below ensures consistent rendering across:

• Outlook (2007–2019, 365 Desktop)

• Outlook Web

• Gmail

• Apple Mail

• Other major email clients

2. CSS Rules

❌ <style> Tags Not Allowed

Email templates must not contain:

<style>
  .header { color: red; }
</style>

Reason

Many email clients strip or partially support <style> blocks.

✅ Correct Approach

Use inline CSS only:

<td style="color:red;">

All styling must be written inside the style="" attribute.

❌ External CSS Files Not Supported

This is not allowed:

<link rel="stylesheet" href="style.css">

Reason

Email clients do not load external stylesheets.

✅ Correct Approach

All CSS must be inline.

3. Layout Rules

✅ Table-Based Layout (Mandatory)

Emails must use <table>-based layout.

❌ Avoid

• <div> for structure

• Flexbox

• CSS Grid

✅ Recommended Structure

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            Content here
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

❌ max-width Not Supported in Outlook

This will not work reliably:

<div style="max-width:600px;">

✅ Correct Approach

Use fixed width tables:

<table width="600">

Recommended email width: 600px

4. Spacing Rules

❌ Padding on <div> and <p> Is Unreliable in Outlook

Example of unreliable structure:

<div style="padding:20px;">

✅ Correct Approach

Apply padding inside <td>:

<td style="padding:20px;">

Always use table cells for spacing.

❌ Avoid Margin-Based Layout

Margins behave inconsistently across email clients.

✅ Use Padding Instead

<td style="padding:20px;">

5. Background & Color Rules

❌ CSS Gradients Not Supported in Outlook Desktop

Not supported:

background: linear-gradient(90deg, #0f2027, #203a43);

Outlook will ignore gradients.

✅ Recommended Alternatives

• Use a solid background color

• Use a gradient image

• Use VML (advanced Outlook technique)

✅ Solid Background Color (Fully Supported)

<td style="background-color:#0f2027;">

6. Border Radius Support

⚠ border-radius Not Fully Supported

Rounded corners may not render in Outlook Desktop.

Recommendation

• Avoid using border-radius for critical design elements

• Use images for guaranteed rounded visuals

7. Button Rules (Outlook-Safe Buttons)

❌ This Will Break in Outlook

<a href="#" style="padding:15px 25px; background:#000;">

Outlook ignores padding on <a> elements.

✅ Correct “Bulletproof Button” Structure

<table cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#000000" style="padding:15px 25px;">
      <a href="#" style="color:#ffffff; text-decoration:none;">
        Click Here
      </a>
    </td>
  </tr>
</table>

Best practices:

• Move padding to <td>

• Use bgcolor attribute

• Avoid styling the anchor for layout

8. Image Rules

Always follow these guidelines:

<img src="https://example.com/image.jpg"
     width="600"
     style="display:block; border:0;"
     alt="Image">

Requirements:

• Use full HTTPS URLs

• Always define width

• Use display:block

• Remove image borders

• Add alt text

9. Font Rules

Supported Fonts

• Arial

• Verdana

• Tahoma

• Georgia

• Times New Roman

❌ Google Fonts (Desktop Outlook)

Not supported in Outlook Desktop.

Always Include Fallback Fonts

style="font-family: Arial, Helvetica, sans-serif;"

10. Fully Supported Features

These are SAFE in all major email clients including Outlook:

❌ Not Supported or Risky Features

12. Recommended Base Template Structure

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email</title>
</head>

<body style="margin:0; padding:0; background-color:#f4f6f9;">

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">

      <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding:20px; font-family:Arial, sans-serif;">

            Email Content

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

</body>
</html>

13. How to Resolve Builder Warnings

When warnings appear in the HTML Builder:

🎯 Final Best Practice Summary

To ensure maximum compatibility:

• Use table-based layout

• Write all CSS inline

• Keep width fixed at 600px

• Avoid modern CSS

• Use safe fonts

• Use padding inside <td>

• Test in Outlook Desktop

✅ Conclusion

Following these rules guarantees:

• No rendering issues in Outlook

• No HTML Builder warnings

• Consistent appearance across all major email clients

• Production-ready, professional email templates