title: Clip-Path Inset in CSS not working in chrome
body: <p>I'm trying to use the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path" rel="noreferrer"><code>clip-path</code></a>, but I get an <code>Invalid property value</code> error in Chrome.</p>
  
  <p><img src="https://i.imgur.com/cT3KDw1.png" alt="screenshot"></p>
  
  <p>Here's a small demo:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.clip-me {  
    clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/gBTrm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gBTrm.png" alt="Clip Path Example"></a></p>
  
  <p><em>Note</em>: This is different from this question on <a href="https://stackoverflow.com/q/19227849/1366033">clip-path does not work with chrome</a>, because it's specifically asking about how to apply clip path using SVG (not CSS)</p>
  
  <p>According to Can I Use, it <a href="http://caniuse.com/#feat=css-clip-path" rel="noreferrer">should work in chrome</a>.</p>