CODEWITHSUNDEEP
rounded-cornerscssinternet-explorer-10
Rick
Rick

Reputation: 722

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.

Upvotes: 4

Views: 9739

Answers (3)

user2355507
user2355507

Reputation: 66

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

Upvotes: 5

Neograph734
Neograph734

Reputation: 1754

As far as I know most browsers won't let you clip an image with rounded borders. (And even if IE10 does it might look weird in other browsers). The simplest solution is to use a nested div and set the image as background:

HTML

<div class="imageborder">
  <div id="image1"> </div>
</div>

CSS

.imageborder {
  border-radius: 5px;
}
#image1 {
  background-image: (yourimage);
}

You might have to set the height the div manually for it to display.

Upvotes: 0

rajesh
rajesh

Reputation: 1

Try border-top-left-radius: 14px.

Upvotes: 0

Related Questions