Search code examples
rounded-cornerscssinternet-explorer-10

border-radius is not applied to img element


I am trying to set a border-radius in IE 10 that does not work, but does work in IE 9. The problem is when I define a radius for only the upper-left corner of an image, the image is not clipped around the border-radius.

BAD:

<img style="border-radius: 14px 0px 0px 0px" alt="" src="">

Now, if I add a second border-radius to either the upper-right or lower-left, then the upper-left radius is applied.

GOOD:

<img style="border-radius: 14px 1px 0px 0px" alt="" src="">

This URL demonstrates the problem and adds reference images for those not using IE 10.

http://gamma.tiedtheleader.com/border-radius.htm

UPDATE 9/30: I heard back from Microsoft on the Connect site, and they confirmed that they were able to reproduce the issue and are investigating it further.


Solution

  • I just had the same problem with rounded corners not being applied in IE 10 on images. Originally I had this:

    border-radius: 45px 0 45px 0;
    

    with had as a result no borders at all, changing one of the 0 border-radius's made my border radius show up again.

    At the end I applied this style:

    border-radius: 45px 0.1px 45px 0.1px;
    

    Which has no side effects in other browsers, but I have back rounded corners in IE 10