Clip-Path Inset in CSS not working in chrome

clip-path, css, html

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.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

Problem

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="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.

Original source

Related problems