title: Jagged "border" showing due to background colour on wrapper element with border-radius: 50%;
body: <p>As I was in the process of trying to make an animated figure (transitions on hover), I found out that the background of my <code>&lt;figure&gt;</code> is showing near the edges when I apply border-radius: 50% to it, even though my image should be taking up all available space.</p>
  
  <p>For a quick demo that illustrates the problem, please look at <a href="http://codepen.io/anon/pen/KwMMKz" rel="nofollow noreferrer">http://codepen.io/anon/pen/KwMMKz</a> </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;figure&gt;
    &lt;img src="http://placehold.it/400x400" alt&gt;
    &lt;figcaption&gt;Demo&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>figure {
    background-color: red;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    position: relative; /* For caption */
  
  }
  
  img {
    border-radius: 50%; /* Forced on image for smooth transition */
    width: 100%;
    transition: opacity 1s ease-out;
  }
  
  figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    color: hotpink;
    text-align: center;
    transition: top 1s ease-out;
  }
  figure:hover img {
    opacity: 0;
  }
  figure:hover figcaption {
    top: 50%;
  }
  </code></pre>
  
  <p><strong>Please note</strong>: I know that placing the background-color on figure:hover is a work-around, but I am more interested in the reason why this "jagged border"-like look is appearing.</p>
  
  <p>My guess is that it has to do with AA rendering (or something related) of the browser and that it treats the <code>&lt;figure&gt;</code> element differently than a media element such as <code>&lt;img&gt;</code>, but I can't find any proof of this online. Is this a bug, is it a "feature", or is it something I can actually fix?</p>
  
  <p>Lastly, I also know that I could have used <code>transform: translateY();</code> here for the animation, but that's not part of my question so please don't provide it as an answer.</p>
  
  <p><strong>UPDATE 17/12 14:03</strong></p>
  
  <p>It appears that this issue is not exclusive to border-radius: 50%. The issue can occur when any wrapping element uses <code>border-radius</code> in combination with <code>overflow: hidden</code>, when the wrapper contains content that is equal or bigger than the wrapper's dimensions.</p>
  
  <p><strong>UPDATE 17/12 14:14</strong></p>
  
  <p>Neither the usage of <code>overflow: hidden</code> on the wrapper element, nor the usage of <code>border-radius</code> on the contained image (or any other child element) seem to be the cause of this as they can be interchanged and the pixelated edge will still appear. </p>
  
  <p>This seems to indicate that this issue is solely caused by 2 DOM elements being in exactly the same place, when any sort of border-radius is applied to the wrapper element and the visible area of the child is limited to that of the parent's.</p>