デスクトップWebkitでは、画像は問題なく正常に表示されます。モバイルWebkit(iPad iOS 5など)で表示すると、まぶしい白い境界線が表示されます。要素の比率が固定されているため、background-imageとbackground-sizeを使用していますが、画像ソース自体は任意のランダムな比率にすることができます。
JSFiddle:
http://jsfiddle.net/tokyotech/A2zAv/
HTML:
<img />
CSS:
body {
background: #666; }
img {
width: 8em;
height: 8em;
display: block;
background: rgba(0,0,0,0.5);
box-shadow: 0 1px 0 rgba(255,255,255,0.1),
0 1px 0 rgba(0,0,0,0.5) inset;
background-size: cover;
border-radius: 0.4em;
background-image: url(http://1.bp.blogspot.com/_yhfaur8OkQ0/SwQzJkzYt5I/AAAAAAAAAtU/5eIqHFmS63s/s400/ev.jpg);
}