title: Outlook Client not properly rendering table borders
body: <p>I've been trying to put together an HTML email template for work, and it looks great! ...in everything except for the Outlook desktop client.</p>
  
  <p>I've tried to be as careful as possible with table-based layouts, inline styles, and all of the other usual culprits. For some reason, my Litmus/Email on Acid tests all come back with very surprising results for Outlook, and I've no idea why.</p>
  
  <p>The border around the entire section is slimmer than it ought to be, the border around the content area inside it is entirely missing, and the borders around the button are likewise missing!</p>
  
  <p>I've stripped down the markup to a relevant snippet below:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="x-apple-disable-message-reformatting"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html charset=UTF-8"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300" rel="stylesheet"&gt;
      &lt;title&gt;New Event Template Test&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body bgcolor="#f8f8f8" style="background:#f8f8f8;margin:0;padding:0;"&gt;&lt;a name="top" data-hs-link-id="0" target="_blank"&gt;&lt;/a&gt;
  
  &lt;!-- framing wrapper --&gt;
      &lt;table background="#f8f8f8" style="border-collapse:separate; padding-top:38px" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"&gt;
      &lt;tbody&gt;&lt;tr&gt;&lt;td width="100%" align="center" class="body__table" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0"&gt;
          &lt;!--[if mso]&gt;
          &lt;table width="600" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper__table" background="#f8f8f8"&gt;
          &lt;![endif]--&gt;
          &lt;!--[if !mso]&gt;&lt;!-- --&gt;
          &lt;table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate; background:#f8f8f8; max-width:600px" class="wrapper__table" background="#f8f8f8"&gt;
          &lt;!--&lt;![endif]--&gt;
          &lt;tbody&gt;&lt;tr&gt;&lt;td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0"&gt;  
  
      &lt;!-- hero --&gt;
              &lt;table width="100%" align="left" cellpadding="0" cellspacing="0" border="10" bordercolor="#ffffff" bordercolorlight="#ffffff" bordercolordark="#ffffff" class="hero__table" style="border-collapse:separate; background:#f5f7f6; border-left:10px solid #ffffff; border-right:10px solid #ffffff; border-top:10px solid #ffffff; border-bottom:0px solid #ffffff; border-color:#ffffff"&gt;
                  &lt;tbody&gt;&lt;tr&gt;
                      &lt;td class="hero__content" background="" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0"&gt;
                          &lt;table class="hero__content--table" width="100%" align="left" cellpadding="0" cellspacing="0" border="30" bordercolor="#F5F7F6" bordercolorlight="#F5F7F6" bordercolordark="#F5F7F6" background="#F5F7F6" style="border-collapse:separate; background:#f5f7f6; border:30px solid #f5f7f6"&gt;
                              &lt;tbody&gt;&lt;tr&gt;&lt;td class="hero--subhead__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:17px"&gt;
                                  &lt;div class="hero--subhead" style="font-weight:bold; font-size:14px; line-height:21px; text-transform:uppercase; letter-spacing:1.5px"&gt;&lt;span class="block-mobile"&gt;Webinar: &lt;/span&gt;03/08 at 10:00AM - 12:00PM PST&lt;/div&gt;
                              &lt;/td&gt;&lt;/tr&gt;
                              &lt;tr&gt;&lt;td class="heroHeaderColumn" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:15px"&gt;
                                  &lt;h1 class="hero--header" style="font-size:36px; line-height:45px; margin:0"&gt;&lt;div id="hs_cos_wrapper_hero_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="text"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/div&gt;&lt;/h1&gt;
                              &lt;/td&gt;&lt;/tr&gt;
  
                              &lt;tr&gt;&lt;td class="hero--button__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:47px; padding-bottom:37px"&gt;                             
                                                          &lt;a class="email-button" style="text-transform:uppercase; letter-spacing:1.8px; font-size:14px; font-weight:bold; text-decoration:none; background-color:#252525; border-left:38px solid #252525; border-right:38px solid #252525; border-top:12px solid #252525; border-bottom:12px solid #252525; background:#252525; color:#FFFFFF" href="http://google.com" bgcolor="#252525" data-hs-link-id="0" target="_blank"&gt;This is a button&lt;/a&gt;
                              &lt;/td&gt;&lt;/tr&gt;
  
                          &lt;/tbody&gt;&lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;           
  
                  &lt;tr&gt;&lt;td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0"&gt;
                      &lt;img class="hero__image" src="https://dummyimage.com/1160x676/cccbcb/252525.jpg&amp;text=image" width="580" style="vertical-align:text-top; max-width:580px"&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;&lt;/tbody&gt;
            &lt;/table&gt;
  
  
  &lt;!-- /framing wrapper --&gt;
          &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
      &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>And screenshots:</p>
  
  <h3>Outlook 2016 (OS X) — Happy!</h3>
  
  <p><a href="https://i.stack.imgur.com/tFht2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tFht2.png" alt="Outlook 2016 (OS X) — Happy!"></a></p>
  
  <h3>Outlook 2007 (Windows) — Where'd my borders go?</h3>
  
  <p><a href="https://i.stack.imgur.com/5so49.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5so49.png" alt="Outlook 2007 (Windows) — Where&#39;d my borders go?"></a></p>