CSS clip-path for IE

CSS clip-path for IE
0

#1

Does anyone know of CSS property that I can use to achieve the same result as clip-path to make rounded shapes around a div? My site needs to be compatible with the latest version of IE, but I checked on www.caniuse.com and clip-path is not supported on IE 11.

This is what I am trying to do:

My current code works as you can see in this codepen:

The problem is, that this code won’t work in IE, how can I solve this? Surely there must be another CSS property which does the same.


#2

Nope, CSS shapes came after IE11, and IE11 does not update. There is the property clip, which clip-path replaces, but it only supported rectangles (that’s why it’s deprecated in favour of the newer property).

All the CSS shapes stuff added functionality to CSS, it wasn’t there before. There are polyfills, for example https://github.com/AlfonsoFilho/ClipPath, but they’re all limited in various ways


#3

Thanks for the reply, I solved it by using border-radius: 50%; in the image element.