box-shadow using images in emails

Below code use images sliced down for all four sides. In mobile, below code hides images and apply box-shadow property.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”
xmlns:v=”urn:schemas-microsoft-com:vml”
xmlns:o=”urn:schemas-microsoft-com:office:office”
xmlns:w=”urn:schemas-microsoft-com:office:word”>
<head>
<!–[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:Allowjpg/>
<o:PixelsPerInch>96/o:PixelsPerInch
/o:OfficeDocumentSettings
</xml><![endif]–>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”format-detection” content=”telephone=no”>
<meta name=”format-detection” content=”date=no”>
<meta name=”format-detection” content=”address=no”>
<meta name=”format-detection” content=”email=no”>
<title></title>
<style type=”text/css”>
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
table {
border-spacing:0;
}
table td {
border-collapse:collapse;
}
.yshortcuts a {
border-bottom: none !important;
}

@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
table.box_shadow {
width: 90% !important;
-webkit-box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
-moz-box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
margin: 0 auto;
display: block;
}
tr.hide,
td.hide,
img.hide,
span.hide{
display: none;
visibility: hidden;
font-size: 0;
max-height: 0;
line-height: 0;
mso-hide:all;
}
}
</style>
</head>

<body>
<!– BOX SHADOW TABLE –>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ class=”box_shadow”>
<tbody>
<tr>
<td colspan=”3″ align=”left” valign=”bottom” style=”line-height: 0″><img src=”images/top.jpg” alt=”” width=”422″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
<tr>
<td width=”12″ align=”left” valign=”top” style=”line-height: 0″><img src=”images/left.jpg” alt=”” height=”500″ width=”12″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
<td width=”398″ align=”left” valign=”top”>
<!– TABLE CONTENT GOES HERE –>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td style=”padding: 20px”>HEADLINE</td>
</tr>
</tbody>
</table>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td style=”padding:0 20px 10px;”>BULLET</td>
<td style=”padding:0 10px 10px 0;”>CONTENT</td>
</tr>
<tr>
<td style=”padding:0 20px 10px;”>BULLET</td>
<td style=”padding:0 10px 10px 0;”>CONTENT</td>
</tr>
</tbody>
</table>
<!– END TABLE CONTENT –>
</td>
<td width=”12″ align=”right” valign=”top” style=”line-height: 0″><img src=”images/right.jpg” alt=”” height=”500″ width=”12″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
<tr>
<td colspan=”3″ align=”left” valign=”top” style=”line-height: 0″><img src=”images/bottom.jpg” alt=”” width=”422″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
</tbody>
</table>
<!– END :: BOX SHADOW TABLE –>
</body>
</html>