Bevel Images with only CSS

CSS method for adding a beveled effect to images like this:

CSS:

span.bevel {
position:relative;
width:200px; /*width of image*/
height:200px; /*height of image*/
display:block;
}
span.bevel span {
position:absolute;
left:0;
top:0;
display:block;
width:190px; /*width of image - 2(width of bevel*/
height:190px;/*height of image - 2(height of bevel)*/
border:5px solid;
border-color:#fff #000 #000 #fff;
filter:alpha(opacity=40);
opacity:0.4;
}



HTML:

<span class="beveled">
<img src="http://www.blogger.com/stormtroopers.jpg" alt="LegoStormtroopers" />
<span></span></span>
<!--Do NOT remove this extra span-->