Email HTML border over content, not cell? - html

Question

<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?

Answer 1

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;">Book An Appointment<br />To Visit Us Tomorrow</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;">
Book An Appointment To Visit Us Tomorrow
</div>
</td>
</tr>
</table>
Unless you need the <h3> for screen readers, I suggest removing it.
Good luck.

Answer 2

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>
Another one is to use the a element as block around your text
table {background:black}
a {
display:block;
border:2px solid #ccc;
width: 50%;
margin: 0 auto;
padding:10px;
}
<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>

Answer 3

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>

Answer 4

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>