Chrome border radius bug

by mmarcon

HTML

<div class="box" id="b1">
    <div class="target">
        <img src="http://farm7.static.flickr.com/6144/5933914248_c75190f1a5_m_d.jpg"/>
    </div>
</div>
<div class="box" id="b2">
    <div class="target">
        <img src="http://farm7.static.flickr.com/6144/5933914248_c75190f1a5_m_d.jpg"/>
    </div>
</div>

CSS

.box {
    width: 200px;
    height: 150px;
    margin: 20px auto;
    padding: 20px;
}

#b1 {
    background-color: #000;
}

#b2 {
    background-color: #ddd;
}

.target {
    width: 200px;
    height: 150px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.target img {
    position: absolute;
    top: -20px;
    left: -20px;
}