[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.