Clip-Path Inset in CSS not working in chrome

Question

I'm trying to use the CSS property clip-path, but I get an Invalid property value error in Chrome.

Here's a small demo:

.clip-me {  
  clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Note: This is different from this question on clip-path does not work with chrome, because it's specifically asking about how to apply clip path using SVG (not CSS)

According to Can I Use, it should work in chrome.

Answer 1

Turns out I just needed the -webkit- prefix (although I don't see it in this list of vendor prefixes)

.clip-me {           /* top, right, bottom, left */
  -webkit-clip-path: inset(0px 50px 50px 0px); 
          clip-path: inset(0px 50px 50px 0px); 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Update as of Chrome 55, clip-path without the vendor prefix is now supported, but many other browsers still require using -webkit-clip-path so it's safer to include it for now.

Here's a snapshot of CanIUse (as of 2017), with the additional details in the top right corner of partial support browsers often indicating the need for the -webkit- prefix

Further Reading:

• Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
• Using clip-path