Email HTML border over content, not cell?

html email table border not showing
html email border
html email spacing
html email space between table rows
html table
outlook table border problem
html table border
html email padding on table
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="border:2px solid #ffffff; padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
    <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
      <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
        <span>BOOK AN APPOINTMENT<br> 
          TO VISIT US TOMORROW</span></a>
    </h3>
    </td>
  </tr>
</table>

No matter where I add the styling for border, it always wraps the entire cell, not the cell content itself.

Here's how it is with the code:

If I add it on the span element, it breaks the border entirely, like this:

Here's how I need it to be:

What am I doing wrong here?

This is fairly straightforward and will work consistently across all email clients.

Single line of text:

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="" style="margin: auto;">
  <tr>
    <td style="text-align: center;">
      <h3 style="margin: 0;"><a href="#" style="border: 2px solid #ffffff; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; padding: 20px 30px; color: #ff0000; display: block; letter-spacing: 2px;">Book An Appointment<br />To Visit Us Tomorrow</a></h3>
    </td>
  </tr>
</table>

Two lines of text:

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="260" style="margin: 0; border: 2px solid #ff0000;">
  <tr>
    <td style="background: #222222; border: 8px solid #222222; text-align: center;">
      <div style="padding: 10px 15px;">
        <a href="#" style="background: #222222; border: 1px solid #222222; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; color: #ffffff; display: block; letter-spacing: 2px; mso-line-height-alt: 22px;">Book An Appointment To Visit Us Tomorrow</a>
      </div>
    </td>
  </tr>
</table>

Unless you need the <h3> for screen readers, I suggest removing it.

Good luck.

HTML E-Mail and borders: a hard-won lesson, I was working on an HTML e-mail, and ran into an issue with borders. And, if the cell has no content, but you need it to be a certain width, the  Cellpadding: space between the cell wall and cell content (number of pixels) Border : specifies if table has a border or not (options: 1 or 0) Width : width of the table (number of pixels)

There are a lot of solution for your problem: one is to add a div around your cell content as follows:

table {background: black}
.contour {
    border: 2px solid #ccc;
    width: 50%;
    height: 20%;
    margin: 10px auto
}
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td style="border:2px solid #ffffff; padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
        <div class="contour">
          <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
            <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
              <span>BOOK AN APPOINTMENT<br> 
                TO VISIT US TOMORROW</span></a>
          </h3>
        </div>
        </td>
      </tr>
    </table>

Paddings, Margins and Borders in Modern HTML Emails, As you can see, there is margin-right on the left column and margin-right on the left column. mobile email clients that do not support media queries. to the placeholder cell and a   as content. th.invalid, td.invalid { border: 1px double #b8202a; } Using the Chrome debugger, I can see the class applied to the cell, and I can also see that the layout states that th cell should have the specified border yet it does not consistently have red borders. Increasing the border size or type between double and solid seems to have no effect.

Put the border on the h3 and make it inline-block

td {
  background: grey;
  text-align: center;
}

h3 {
  border: 1px solid white;
  display: inline-block;
}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
      <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
        <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
          <span>BOOK AN APPOINTMENT<br> 
          TO VISIT US TOMORROW</span></a>
      </h3>
    </td>
  </tr>
</table>

How to Create Spacing in HTML Emails, Creating spacing in HTML emails has always been a surprisingly tricky topic. style="display:block;" border="0"> <br><br> Content goes here It's best to stick to using padding on table cells, rather than on tables, for ease of  I have an HTML table with the class "productsTable". I want to give each cell in the table a border. Now I have tried the following in my stylesheet but none of the two works. What am I doing wrong? Thank You. td.productsTable { border: 1px dotted #999999; } .productsTable td { border: 1px dotted #999999; } HTML:

Don't style the table, style the content, and simplify your markup:

    <td>
        <a alias="" conversion="false" data-linkto="https://" href="google.com"
 style="display:inline-block;border:2px solid #ffffff; padding: 8px 10px;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;" title="Book Appointment">
    BOOK AN APPOINTMENT<br> 
    TO VISIT US TOMORROW</a>
    </td>

Tips for Margins and HTML Email Padding, Margins and HTML email padding go a long way to ensure a smooth user experience within an email. They create a space between the content's cell and either other content elements or the email's borders. Not all spacing is created equal in code, especially when it comes to finicky email clients  The lack of any sort of coding standard makes creating HTML emails hard. Even something as simple as applying background colors to email elements can be tricky to get right. In fact, there are a number of email clients that display background colors differently depending on how they’re coded. Read on to get the scoop and find the one bulletproof way to code background colors in email for

How to change the Background-Colors in a HTML Email Newsletter, Share on Facebook · Share on Twitter · Share on LinkedIn. Change the Background-Color(s). How to change Background-Colors for Body, Table and Cell in a HTML Email <table border="0" cellpadding="0" cellspacing="0" class=​"container" to use "content" tables instead, since some mail clients might not support cell  HTML table borders without CSS. Some time ago, mostly (but not only) in 1990s there were several pure HTML tricks used to achieve things now done by CSS. Handling HTML table borders was one of them. It is not exactly handling borders, but rather imitating doing it by exploiting the cellspacing and bgcolor attributes.

HTML Tables, Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. Over the past 6 years I've learned a few things about coding HTML emails and I would like to share this knowledge with you. So if you're just starting out as an HTML email designer, this article is for you. And if you're a seasoned HTML email designer, who knows you might learn a thing a two (or you can add more tips in the comment section below).

CSS Empty-cells Property, The empty-cells property sets whether or not to display borders on empty cells in a table. Note: This property has no effect if border-collapse is "collapse". At Email Uplers, our team of 150+ experienced email developers have created 60,000+ email templates for over 5000 brands & agencies. In this article, we will teach you how to create HTML email, which you can refer to for basic troubleshooting of your email template html code.

Comments
  • Can't run code on jsfiddle or SO snippet, pls check
  • Thanks for the help! It seems to be working indeed, but only Outlook separates the borders for them it seems. I'll see if I can figure that one out myself.
  • @Rain My apologies. I forgot Outlook does that to an href with two lines of text. So I revised my answer and tested it in Litmus. The two lines of text gets Outlook much closer to looking like the way you want it.
  • div's don't work properly across all email clients (outlook ignores display block and inline-block from divs). The a element might work properly.