title: How to squircle an app icon image with just CSS
body: <p>I've been banging my head against the wall trying to figure out how to use <a href="http://thecodeplayer.com/walkthrough/css3-squircles" rel="noreferrer">The Code Player's CSS3 Squircles example</a> to create an iOS-7-style app icon on my website (testing in the Safari browser). The example uses pseudo tags to clip the background color, whereas I need to crop around an <code>&lt;img&gt;</code>. In case you're not familiar, a <a href="https://en.wikipedia.org/wiki/Squircle" rel="noreferrer">squircle</a> is like a rounded-rect, but with the sides rounding beyond the corner radius, like so:</p>
  
  <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Squircle2.svg/240px-Squircle2.svg.png" alt="a squircle"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.icons img {
    width: 100px;
    height: 100px;
  
    border-radius: 24%;
  }
  
  .icons a {
    text-decoration: none;
    display: inline-block;
    position: relative;
  }
  /*Now we will create fish-eye shapes using pseudo elements and clip them to add a curve to the sides of the icons*/
  .icons a:before, .icons a:after {
    content: '';
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    background: inherit;
    border-radius: 100%; /*circle*/
    /*time to transform the circle into fish-eye shape. iOS7 style now.*/
    -webkit-transform: scaleX(2) scaleY(1.05);
    transform: scaleX(2) scaleY(1.05);
    /*clipping the left and right sides - 17px from the left and right*/
    clip: rect(0, 66px, 100px, 34px);
    /*pushing it behind the icon*/
    z-index: -1;
  }
  /*duplicating the :before element and rotating it 90deg and swapping the X/Y transforms*/
  .icons a:after {
    -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="icons"&gt;
    &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/256/256/abstract/2/" /&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>