IE9-11 img-circle error when also applying padding to image.

[EvoTech3]

http://jsfiddle.net/9EZ4H/3/

Tested on: IE11, IE10, IE9, IE8, Safari for Win 5.1.7

[cvrebert]

Per our browser compatibility table, Safari for Windows is not supported.

[cvrebert]

Confirmed on IE9-11.
Our docs already mention that IE8 doesn't support rounded corners at all.

@EvoTech3 This issue is only about .img-circle, correct?

[EvoTech3]

@cvrebert yes

[KyleMit]

This looks like it's related to #10122, both of which might fall out of scope for fixing with the default bootstrap library.

It's merely a byproduct of applying both padding and a border-radius to the same element in some browsers. The border-radius changes the curvature of the border component of the box model, which surrounds the padding component.

Even though the browser has given the border a circular curve, the margin and padding elements are still represented as rectangles. In some browsers, the border-radius curve is not propagated to other box model components.

Here's how it looks in chrome and in IE without any fixes:

Here's a fiddle that demonstrates the issue

If you're looking for fixes, you can do one of two things:

1. You can just add a wrapper around your image and apply the padding to the wrapper.
2. Apparently adding a border line to the element prevents the issue. If you don't want to see the border, you could use border: 1px solid transparent

Also shows up in this Stack Overflow question about Border-radius and padding not playing nice.

[mdo]

Don't think there's anything we can do. Wrapping the element is your best bet.

[hackpron]

in IE9 any of code is not working to circle image...

[Alpdog14]

I am having issues with img-circle on IE9-11, has anyone figured out a solution?