画像に写真風のフレームと影を付ける

html記述部

<div id="frame-shadow"><img src="***"></div>

css記述部

#frame-shadow img{
border:solid 15px white;
padding:10px;
-webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
box-shadow: 0 10px 8px -6px #8d8c8c;
}

borderが認識されず、paddingでごまかしてます。
別のところでは出来ていたけど、why?

スタイルシートでhoverを利用して作成しています。

#highlight{
width:600px;
color : black;
line-height : 1.3;
}
#highlight td{
padding : 10px 5px;
background-color : white;
border:1px solid darkgreen;
font-size:14px;
color : black;
line-height : 1.5;
}
#hi-title{
width:110px;
font-size:14px;
text-indent : 10pt;
}
#highlight tr:hover td{
background: darkgreen;
color: white;
}

htmlファイルの実装側はこんな感じです。

<table id="highlight">
<tbody>
<tr>
<td id="hi-title">2の倍数</td>
<td>1の位が0,2,4,6,8の偶数</td>
</tr>
</tbody>
</table>

見本：こんな感じ