title: Gradient opacity on borders of image
body: <p>I'd like to make gradient opacity from 100% to 0% only on borders of image.</p>
  
  <p>I can for example make gradient opacity on one direction of image like here( bottom has gradient)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .opacitygradient{
    -webkit-mask-image: -webkit-gradient(linear, left top, 
      left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://placehold.it/300x300" class="opacitygradient"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But i'd like to have 10px gradient going on each side (all borders), not just one direction like in snippet above.
  <br>Any ideas?</p>