Rounded borders cropping child

Test Rounded borders cropping an child with absolute positioning on Android

by Neviton

HTML

<div id="container" class="container">
    <img src="http://fakeimg.pl/240x120/ff0000/fff/?text=Rel + Abs" alt="" />
</div>

<div id="container2" class="container">
    <img src="http://fakeimg.pl/240x120/ff0000/fff/?text=Rel" alt="" />
</div>

<div id="container3" class="container">
    <img src="http://fakeimg.pl/240x120/ff0000/fff/?text=Static" alt="" />
</div>

<div class="gambi">
    <div id="container4" class="container">
        <img src="http://fakeimg.pl/240x120/00ff00/fff/?text=GAmbi" alt="" />
    </div>
</div>

CSS

div.container {
    width: 120px;
    height: 80px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    overflow: hidden;
    margin: 120px 25px;
    float: left;
    border: solid 4px black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.gambi {
    border: solid 4px black;
    border-radius: 28px;
    position: absolute;
    top: 25px;
    left: 25px;

    width: 120px;
    height: 80px;
    overflow: hidden;
}
div.gambi .container{
    margin: 0;
    border: none;
}
div img {
    left: -50px;
    top: -20px;    
}
#container { position: relative; }
#container img { position: absolute; }

#container2 { position: relative; }
#container2 img {
    margin-left: -50px;
    margin-top: -20px;
}

#container3 {}
#container3 img {
    margin-left: -50px;
    margin-top: -20px;
}