IE：边框半径与背景不平滑

Question

I have a styling problem in IE environment. When I use border-radius to make a div circle, the border of the circle div is not smooth as chrome or firefox show.

Following are the code that I use

html

<div class="col-sm-4">
    <div class="circle-images"></div>
</div>

css

Padding-top:60% makes div square when you place background image.

.circle-images{
   width:60%;
   padding-top:60%;
   border-radius: 60%;  
   margin-right: auto;
   margin-left: auto;
   background: url("some/path/to/jpg") no-repeat center center;
   background-size:contain;
 }

I also tried this style as well. The border helped a little smoother than without border but it has a lot of noises on the border.

.circle-images{
  width: 60%;
  padding-top:50%;
  border-radius: 60%;
  border: 27px solid #EAEAE4;
  margin-right:auto;
  margin-left:auto;
  background: url("some/path/to/jpg") no-repeat center center;
  background-size:contain;
}

Is there any way make border smooth as Chrome in IE ?

** update ** Since @LGSon was asking sample images, here is what's happening

IE noises

Answer 1

This is a bug in IE. The safest way (but not the easiest) is to make the images them selves circular. Another solution is to try and use browser specific hacks, but this is very unsafe.

If at all possible, I recommend converting to an image structure like PNG which allows transparency, then making your images circular.