Overflow: hidden for rounded borders using css3pie in IE8?

Question

I have this HTML:

<div id="micrositePhotoDiv"> <img id="micrositePhoto" /> </div> 

and css:

 #micrositePhotoDiv { overflow:hidden; @include border-radius(10px); behavior: url(PIE.htc); } 

src for img installed programmatically in javascript.

img set to the width of its containing div. In ie9, firefox, chrome etc. This makes the image rounded (because the corners of the image are outside the border, but there is overflow:hidden; )

In IE8, the image has no rounded borders. The border-radius property takes effect (I see it behind the image if I make border: solid black 1px; ), but parts of the image outside the borders are not hidden.

Is there any way around this with css, css3pie, javascript, etc.? Or is this impossible to achieve in IE8?

Answer 1

Apply border-radius to both div and img and it should work.