CSS table border extending over set width in HTML Email

[DejavuPoison]

I am creating an HTML email and would like rounded corners. These don’t seem to appear in emails or even in IE (even with the –ms-border-radius applied)….

I decided to use images for the top and bottom of the email to get the results I was looking for.

Everything seems to show okay, except for the middle section, which is not an image. This section throws the right border off to the right a few pixels ONLY in the email version. This happens no matter what is in the middle table (I took all the code out and just put "..." in to show the problem) It shows up correctly when viewed in a browser.

An image as appears in outlook: http://i79.photobucket.com/albums/j1...5/throwoff.jpg

<!--TOP ROUNDED CORNER IMAGE-->
<table border="0" cellspacing="0" cellpadding="0" width="650" style="background-image:url(../images/round1.png);width:650px;height:21px;" valign="top"><tr><td width="650" height="21">
    <!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:url(#default#VML);display:inline-block;width:650px;height:21px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="../images/round1.png" />
    <![endif]-->
</td></tr></table>

<!-- MIDDLE SECTION WITH REAL BORDERS-->
<table border="0" cellspacing="0" cellpadding="0" width="650" bgcolor="#ffffff" style="color: #797979; text-decoration: none; border-right: 2px solid #c8c8c8; border-left: 2px solid #c8c8c8; background-color: #ffffff; z-index: 100;">
<tr><td width="27" colspan="2">...<br /></td>
<td width="596" valign="top"></td>
<td width="27" colspan="2"><br /></td></tr></table>


<!--BOTTOM ROUNDED CORNER IMAGE-->
<table border="0" cellspacing="0" cellpadding="0" width="650" style="background-image:url(../images/round2.png);width:650px;height:21px;" valign="top"><tr><td width="650" height="21">
<!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:url(#default#VML);display:inline-block;width:650px;height:21px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="../images/round2.png" />
<![endif]-->
</td></tr></table>

Thanks for any help!

[DejavuPoison]

Removed "width=650" on the table and that fixed it.

[achira]

Originally Posted by DejavuPoison

I am creating an HTML email and would like rounded corners. These don’t seem to appear in emails or even in IE (even with the –ms-border-radius applied)….

I decided to use images for the top and bottom of the email to get the results I was looking for.

Everything seems to show okay, except for the middle section, which is not an image. This section throws the right border off to the right a few pixels ONLY in the email version. This happens no matter what is in the middle table (I took all the code out and just put "..." in to show the problem) It shows up correctly when viewed in a browser.

An image as appears in outlook: http://i79.photobucket.com/albums/j1...5/throwoff.jpg

<!--TOP ROUNDED CORNER IMAGE-->
<table border="0" cellspacing="0" cellpadding="0" width="650" style="background-image:url(../images/round1.png);width:650px;height:21px;" valign="top"><tr><td width="650" height="21">
    <!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:url(#default#VML);display:inline-block;width:650px;height:21px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="../images/round1.png" />
    <![endif]-->
</td></tr></table>

<!-- MIDDLE SECTION WITH REAL BORDERS-->
<table border="0" cellspacing="0" cellpadding="0" width="650" bgcolor="#ffffff" style="color: #797979; text-decoration: none; border-right: 2px solid #c8c8c8; border-left: 2px solid #c8c8c8; background-color: #ffffff; z-index: 100;">
<tr><td width="27" colspan="2">...<br /></td>
<td width="596" valign="top"></td>
<td width="27" colspan="2"><br /></td></tr></table>


<!--BOTTOM ROUNDED CORNER IMAGE-->
<table border="0" cellspacing="0" cellpadding="0" width="650" style="background-image:url(../images/round2.png);width:650px;height:21px;" valign="top"><tr><td width="650" height="21">
<!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:url(#default#VML);display:inline-block;width:650px;height:21px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="../images/round2.png" />
<![endif]-->
</td></tr></table>

Thanks for any help!

Have you considered rounding the borders not as an image but just in the css property?

.nameoftextcontainer
{
border-radius: 10px; (or so, increase/decrease to achieve desired effect)
}

should do it I think.

[DejavuPoison]

Yes, I normally use CSS properties. The problem is that IE cannot see rounded corners and they don't seem to show up in HTML emails.