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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.