Email signature looks broken in Outlook — how to fix it

Email signature looks broken in Outlook — how to fix it

1. 1

   Outlook uses Microsoft Word's rendering engine — CSS floats, flexbox, and grid are all ignored. Use <table> layouts only.

2. 2

   Apply all styles inline on each element — Outlook strips any <style> blocks from the email head.

3. 3

   Set width attributes directly on <td> and <img> elements as HTML attributes, not in CSS — Outlook reads attributes, not stylesheets.

4. 4

   Avoid border-radius — Outlook does not support rounded corners on images or divs.

5. 5

   If images are missing, check the URL is HTTPS and publicly accessible. Outlook blocks external images by default — users may need to click "Enable content".

6. 6

   Use a <div style="width:2px;background:COLOR;">&nbsp;</div> for dividers instead of CSS border properties.

7. 7

   Always test in the Outlook desktop app for Windows — Outlook on the web (OWA) is more lenient and will not catch the same rendering issues.