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);
}

The src for the img is set programatically in javascript.

The img is set to the width of its containing div. In ie9, firefox, chrome and so on, this makes the image have rounded borders (because the corners of the image are outside the border, and there is overflow:hidden;)

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

Is there any way around this using css, css3pie, javascript etc? Or is this not possible to achieve in IE8?

Answer 1

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