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.

screenshot

Here's a small demo:

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

<img class="clip-me" src="https://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.

KyleMit · Accepted Answer · 2017-07-05T14:37:51.793

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="https://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:

Even [further reading](http://stackoverflow.com/a/19904268/1654265): Lea Verou's PrefixFree — Andrea Ligios, Feb 18 '15 at 16:37
since when is it clockwise top-right-bottom-left and not x1, y1, x2, y2 ? — Loïc, Nov 05 '16 at 17:50

Clip-Path Inset in CSS not working in chrome

1 Answers1