3d borders on a html row

3d borders on a html row

My pen: http://codepen.io/helloworld/pen/gimoI
I want to have a gray and white border on a table row to achieve a 3d effect.
Why is only one border color visible?
<link
href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
rel="stylesheet">
<table style="width:100%;">
<tr>
<td style="vertical-align:top;width:60px;">Alarm 1</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Helmenstraße 5</span>
<span>90000 Nürnbergxxxxxxxxx</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down
button"></i></td>
</tr>
<tr>
<td style="width:60px;vertical-align:top;">
<div style="border-radius:28px;border:black solid
1px;background:red;">Alarm 1</div>
</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Langenburgerwald allee 25/c</span>
<span>70000 Wurmlingen ob der Tauber</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down
button"></i></td>
</tr>
</table>
body,html{
padding:0;
margin:10px;
background:#fafafa;
}
table{
border-collapse:collapse;
border-spacing:0;
}
table td
{
padding: 5px;
}
td {
border-bottom: gray solid 2px;
border-top: white solid 2px;
background:green;
}