How to display Border Radius on Outlook - html

I have an Email Template which is working fine for all Gmail, Yahoo etc. But in Outlook it is not working. Can anyone please help me how to make it visible on Outlook.
<div style="border: 2px solid grey; border-radius: 5px; padding: 20px;">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span></span></p>
<p> ${mail_script:notification_logo}</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by <strong>${u_project_manager}</strong>.</span></span></p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span></td>
</tr>
<tr>
<td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span></td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span></td>
</tr>
<tr>
<td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span></td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span></td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span></td>
</tr>
</tbody>
</table>
<hr />
<p> </p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span></p>
<p> </p>
</div>


Only Outlook on IOS devices supports border-radius.
The Windows version out Outlook does not support border-radius since it uses Microsoft Word as its processor.
see camapaign monitor:
https://www.campaignmonitor.com/css/box-model/border-bottom/


Although you can try the below code, if it helps solving your problem.
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="40" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;background-color:#000;text-align:center;">
<a href="http://www.google.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Test
</a>
</td>
</tr>
</table>
<br/>
<br/>
<br/>
<div style="border: 2px solid grey;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 20px;">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
</span>
</p>
<p>Lorem ipsum </p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project( Lorem ipsum ) has been submitted and is being reviewed by <strong>Lorem ipsum </strong>.</span></span>
</p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Lorem ipsum </span></span>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Lorem ipsum </span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Lorem ipsum </span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Lorem ipsum </span></span>
</td>
</tr>
</tbody>
</table>
<hr />
<p> </p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
</p>
<p> </p>
</div>
</body>

Related

Guidence: HTML table format

I am working on a a html form which is used by a third party tool which takes HTML format to generate the output form.
Here is the html output:
This is the current output:
The issue which I am facing is when I trying to separate below marked table to a new table I am loosing the format. Can anyone please guide me how to maintain the same format when I remove the below mentioned table to a new table.
Here is my HTML code:
<table cellpadding="1" cellspacing="1" style="width: 100%; border-collapse: collapse; border: solid;">
<tbody>
<tr>
<td rowspan="4" style="width: 289.333px; text-align: center; border: solid;"><span style="font-family: Calibri, sans-serif; font-size: 11px;">section 1</span></td>
<td rowspan="4" style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">section 2</span></span>
</td>
<td rowspan="4" style="width: 289.333px; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">section 3</span></span>
</td>
<td rowspan="4" style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">4</span></span>
</td>
<td colspan="7" style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(4)<br> DAY AND DATE</span></span>
</td>
<td rowspan="4" style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(5)<br> section</span></span>
</td>
<td rowspan="4" style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(6)<br> section</span></span>
</td>
<td rowspan="4" style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(7)<br> section</span></span>
</td>
<td colspan="4" rowspan="3" style="text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(8)<br> DEDUCTIONS</span></span>
</td>
<td colspan="3" rowspan="4" style="text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(9)<br>section<br></span></span>
</td>
</tr>
<tr>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Sun</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Mon</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Tue</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Wed</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Thur</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Fri</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Sat</span></span>
</td>
</tr>
<tr>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
<tr>
<td colspan="7" style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"><br></span></span>
</td>
<td style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">Tot</span></span>
</td>
<td style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">Tot<br></span></span>
</td>
<td style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">Tot<br></span></span>
</td>
<td style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">Tot</span></span>
</td>
</tr>
<tr>
<td colspan="21" style="width: 289.333px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
<tr>
<td rowspan="2" style="width: 289.333px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"><br></span></span>
</td>
<td rowspan="2" style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 289.333px; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td colspan="3" rowspan="4" style="text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
<tr>
<td style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
</tbody>
</table>
<p><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</p>
<table>
<tbody>
<tr>
<td rowspan="2" style="width: 289.333px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"><br></span></span>
</td>
<td rowspan="2" style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 289.333px; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td colspan="3" rowspan="4" style="text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
<tr>
<td style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-family: Calibri, sans-serif; font-size: 11px;"> </span></td>
</tr>
</tbody>
</table>

Banner image is not rendering properly in the Outlook notification

I have a banner image added to the notification and dimension i set and Width: 100% & height: auto which is working fine in Mobile, Gmail but not working properly in Outlook.
My sample code:
<p> </p>
<p><img style="align: baseline;" title="" src="sampleimage.jpgx" alt="" width="100%" height="auto" align="baseline" border="" hspace="" vspace="" /></p>
<p> </p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p> </p>
<p>Your request is submitted (${number}).</p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><strong>Title</strong></td>
</tr>
<tr>
<td style="color: black;" colspan="5">${short_description}</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><strong>Submitted by</strong></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><strong>Approver</strong></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><strong>Department</strong></td>
</tr>
<tr>
<td style="color: black;" colspan="3">${submitter}</td>
<td style="color: black;" colspan="1">${u_project_manager}</td>
<td style="color: black;" colspan="1"><span style="font-family: museo-sans, sans-serif;">${department}</span> </td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><strong>Business case </strong></td>
</tr>
<tr>
<td style="color: black;" colspan="5">
<p>${business_case}</p>
<p> </p>
</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-size: 10pt;"><span style="font-family: 'Montserrat', sans-serif;">Thank you,</span><br /></span></p>
<p> Service Desk</p>
<p> </p>
I want to resize the banner image size, if i set the width & height with some values the image quality is getting disturbed and getting different outputs in different systems majorly on IOS & Outlook

How to apply Border to the Email Template using HTML

I have a email template designed which contains a Banner Image & tables rows etc. Everything is aligned perfectly. But i want to set everything in a single border.
Below is my code snippet and output what I am receiving, can anyone please help me how to achieve.
<p><img src="medical.jpg" width="100%" height="144" /></p>
<p> </p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
</span>
</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by <strong>${u_project_manager}</strong>.</span></span>
</p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span>
</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
</p>
<p> </p>

Here is code. hope it will help you.If any changes please let me know.
https://jsfiddle.net/rfx2jkc1/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
.main-table {
width: 640px;
margin: 0 auto;
}
.logo-table {
width: 100%;
padding-bottom: 10px;
}
.content-table {
width: 100%;
}
.content-area {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}
.content {
background-color: #fff;
padding: 20px;
font-family: "Segoe UI", Arial;
font-size: 0.9em;
color: #111111;
}
.content table {
font-family: "Segoe UI", Arial;
font-size: 0.9em;
color: #111111;
border: 0
}
.receiverName {
font-family: "Segoe UI", Arial;
font-size: 1.1em;
color: #006699;
font-weight: lighter;
}
.senderName {
display: block;
}
.customer-password {
display: none;
}
.template-table {
border-collapse: collapse;
}
.template-table td {
border-top: 1px solid #ccc;
padding: 10px
}
.template-table td:last-child {
border-bottom: 1px solid #ccc;
}
.border-bottom {
border-bottom: 1px solid #ccc
}
.padding0 {
padding: 0;
}
</style>
</head>
<body>
<table class="main-table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td class="content-area">
<table class="logo-table" border="0" cellspacing="0" cellpadding="10">
<tr>
<td bgcolor="#0693ce" align="center">
<img src="#" width="200" />
</td>
</tr>
</table>
<table class="content-table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content">
<div>Hello [CustomerName],</div>
<br />
<p align="center"><strong>
<font color="#000000" size="3" face="Segoe UI, Arial">Congratulations! You have created user with below credentials on
[ABCProviderName] CSP Portal.</font>
</strong>
</p>
<br />
<table width="100%" cellpadding="5" cellspacing="1" bgcolor="#cccccc" class="template-table">
<tr bgcolor="#fff">
<td align="left" width="30%">
<strong>
<font color="#000000" size="2" face="Segoe UI, Arial">UserName</font>
</strong>
</td>
<td align="right" width="70%">
<font color="#000000" size="2" face="Segoe UI, Arial">[EmailID]</font>
</td>
</tr>
<tr bgcolor="#fff">
<td align="left" width="30%">
<strong>
<font color="#000000" size="2" face="Segoe UI, Arial">Password</font>
</strong>
</td>
<td align="right" width="70%">
<font color="#000000" size="2" face="Segoe UI, Arial">[Password]</font>
</td>
</tr>
</table>
<br />
<br />
<br />
<span>Thank You,</span>
<br />
<span class="senderName">[ABCProviderName] CSP.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Email template banner image dimension

I am email template designed which contains a Banner Image. Everything is aligned perfectly except the banner. Below is my code snippet and output what I am receiving.
<p><img src="medical.jpg" width="100%" height="144" /></p>
<p> </p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
</span>
</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by <strong>${u_project_manager}</strong>.</span></span>
</p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span>
</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
</p>
<p> </p>
Output:
In my Gmail it is working perfectly fine but when it comes to outlook it is not working fine
Output:
Gmail Output
Outlook Output
In the Outlook the complete page itself displays the banner but in gmail it looks Okay. Am I doing anything wrong?

Remove the height and change the width of 100% for the image to the width of your email.
Example:
<p><img src="medical.jpg" width="100%" height="144" /></p>
should be:
<p><img src="medical.jpg" width="600" /></p>
The width of 600 pixels will be the width of your email. Height attribute can be dropped because if you assign a width to an image, height is proportionate. Don't use width in style tag, Outlook ignores it.
Also by default if you are using retina images (or really big ones) Outlook will resize the image to its original dimensions if it does not find a width attribute.

Try using height property in percent, something like 35% or use 144px
<img src="medical.jpg" width="100%" height="144px" />
or
<img src="medical.jpg" width="100%" height="35%" />

Why are table lines not displaying in Edge?

enter image description here
Had to remove all our copy in order to post publicly, sorry if it makes it hard to see. The border for the rightmost column "Pro" shows up in Firefor, Chrome, and Safari but not in Edge or IE. Anybody run into this before?
section class="line">
<div class="box margin-bottom">
<div class="margin-top-25">
<h1></h1>
</div>
<div class="line margin-top-25">
<div class="margin">
<div class="s-12">
<center>
<table class="table2" style="">
<tr>
<td width="40%"> </td>
<td width="15%"> </td>
<td width="15%"><span class="button" style="background-color: #d2d2d2; color:#000000"><strong></strong></span></td>
<td width="15%"> </td>
<td width="15%"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2">
<a href="basic_gif1.html" class="tooltip button" style="color: white; background-color: #58595B">
<span class="tooltiptext">Click here to learn more about the Basic Package</span>
<strong>Basic</strong>
</a>
</td>
<td class="td2">
<a href="plus_gif1.html" class="tooltip button" style="color: white; background-color: #b8282e">
<span class="tooltiptext">Click here to learn more about the Plus Package</span>
<strong>Plus</strong>
</a>
</td>
<td class="td2">
<a href="pro_gif1.html" class="tooltip button" style="color: white; background-color: #dc8419">
<span class="tooltiptext">Click here to learn more about the Pro Package</span>
<strong>Pro</strong>
</a>
</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>•</strong></td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><img src="img/newjersey.png" /></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><img src="img/newjersey.png" /></td>
<td class="td2 tdbl" style="font-size: 24px;">
<img src="img/newjersey.png" />
<p>+</p>
<p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif"><strong>WSJ</strong> or <strong>Forbes</strong></p>
</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl"> </td>
<td class="td2 tdbl">Choose 1</td>
<td class="td2 tdbl">Choose 2</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>•</strong></td>
</tr>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$349</strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$549</strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$979</strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="background-color: #f5f5f5;font-size: 20px;"><strong></strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="text-align: left; font-size: 20px;"><strong></strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="text-align: left;font-size: 20px;"><strong></strong></td>
</tr>
</table>
</center>
</div>
</div>
</div>
<div class="line margin-top-25" style="background-color: #b8282e;"> </div>
<div class="margin-top-25">
<h1 id="tools"></h1>
<p></p>
</div>
<div class="line margin-top-25">
<div class="margin">
<div class="s-12">
<div class="tabs">
<div class="tab-item tab-active">
<a class="tab-label active-btn" name="" style=" width: 33.33333333%;"></a>
<div class="tab-content">
<div class="box" style="text-align: left">
<center>
<table class="table2" style="width: 60%;">
<tr class="tr2">
<td class="td2"> </td>
<td class="td2" colspan="6"><strong>Quantity</strong></td>
</tr>
<tr class="tr2">
<td class="td2"><strong>Product</strong></td>
<td class="td2"><strong>100</strong></td>
<td class="td2"><strong>250</strong></td>
<td class="td2"><strong>500</strong></td>
<td class="td2"><strong>1,000</strong></td>
<td class="td2"><strong>2,000</strong></td>
<td class="td2"><strong>3,000</strong></td>
</tr>
<tr class="tr2">
<td class="td2"></td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
</tr>
<tr class="tr2">
<td class="td2">Brochures</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
</tr>
<tr class="tr2">
<td class="td2"></td>
<td class="td2" style="font-size: 12px;">$200</td>
<td class="td2" style="font-size: 12px;">$245</td>
<td class="td2" style="font-size: 12px;">$325</td>
<td class="td2" style="font-size: 12px;">$525</td>
<td class="td2" style="font-size: 12px;">$825</td>
<td class="td2" style="font-size: 12px;">$925</td>
</tr>
<tr class="tr2">
<td class="td2" colspan="7" style="font-size: 12px;"></td>
</tr>
</table>
For the life of me I can't see what's off here. Admittedly I'm pretty new to HTML, but through checking W3 and other online resources I haven't been able to nail down what would be causing this to render incorrectly in IE/Edge

You can use CSS
table {border-collapse: collapse;}
.table2 td {border: 1px solid black;}
See codepen: https://codepen.io/anon/pen/VGRgyJ