Border-Radius with position absolute images (no overlap) - overflow

Question

I've got a inside and 's. My problem: the outer div got border-radius and overflow: hidden. The images are wider than it's parent . But overflow: hidden works well to hide the rest of the image. Only the border-radius works not on the images. Why?
My HTML structure:
<div class="teaser-container tc1-sidebar">
<a href="#">
<img class="teaser-image bottom" src="dist/img/teaser/bigteaser-bonus-hover.jpg" alt="teaser"><img class="teaser-image top" src="dist/img/teaser/bigteaser-bonus.jpg" alt="teaser">
</a>
</div>
CSS for outer :
position: relative;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
CSS for inner 's:
position: absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Thanks for any workaround!
Look at my problem: http://jsfiddle.net/7h4SD/

Answer 1

see if this works simple work around
fiddle
CSS ---
.box-s1 {
width: 360px;
height:360px;
border: 1px solid #515355;
margin: 10px 0px 10px 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 60px;
background: url('http://weirdmovievillage.files.wordpress.com/2010/12/dexter-main-iamge1.jpg');
}
HTML
<!--
* basic problem: image is wider than box.
* round-corners don't grip
-->
<div class="teaser-image-box box-s1 tib-ef1">
</div>
Let me know if the workaround doesnot suit you. Basically setting the height and width will be equal to the image height and width :) you can also keep the image added to check its height but change visibility
display:none
In case you want the image to be there :)