Search code examples
htmlcssclip-path

Clip-Path Inset in CSS not working in chrome

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.sstatic.net/MnWjF.png" width="100">

Clip Path Example

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.

Solution

  • 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.sstatic.net/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

    Can I Use Snaptshot

    Further Reading: