title: Chamfer / Fillet Image HTML
body: <p>I have an image and I'm looking at basic customisation for a small website I'm creating in HTML.</p>
  
  <p>I understand you can chamfer an image, as seen on <a href="https://stackoverflow.com/questions/26597769/adding-chamfer-to-box-using-css3WQAiBP8sDaKN-bWGwneNet_EA&amp;ust=1480249125836885">this question here</a>, that gives a 45Degree cut.</p>
  
  <p>I'm hoping for a more rounded Chamfer on each corner? (I believe it's called a Fillet but I'm not 100% sure of the correct terminology.</p>
  
  <p>As seen in the second picture:</p>
  
  <p><a href="https://i.stack.imgur.com/kwHxf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kwHxf.gif" alt="enter image description here"></a></p>
  
  <p>Using <code>border-radius: 16px 16px 16px 16px;</code> works by putting it in the <code>img</code> class, but I don't want all images affected.</p>
  
  <p>What do I need to do to allow only select images to be chamfered?</p>
  
  <p>I tried this, but it didn't work:</p>
  
  <pre><code>.img-chamfer {
      border-radius: 16px 16px 16px 16px;
  }
  
  &lt;div class="img-chamfer"&gt; 
      &lt;img src="Test.png" &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My exact code can be found here: <a href="https://jsfiddle.net/netazv40/" rel="nofollow noreferrer">https://jsfiddle.net/netazv40/</a></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>.main {
    color:#29abe2;
    text-align: center
  }
    
  .img-wrapper {
    display: inline-block;
  }
  
  .img-wrapperPadding {
    display: block;
    margin: 0 auto 32px;
  }
    
  img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
      &lt;div class="img-wrapper"&gt;
          &lt;div class="img-wrapperPadding"&gt;
              &lt;img src="http://placehold.it/350x208" width="350" height="208"&gt;&lt;br/&gt;
              &lt;img src="http://placehold.it/100x50" width="100" height="50"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="img-wrapper"&gt;
          &lt;div class="img-wrapperPadding"&gt;
              &lt;img src="http://placehold.it/350x208" width="350" height="208"&gt;&lt;br/&gt;
              &lt;img src="http://placehold.it/100x50" width="100" height="50"&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I only need the larger image to be affected/chamfered.</p>