title: CSS Add a rounded sticker in a div corner with image inside
body: <p>I have the following block in html page:</p>
  
  <pre><code>* {
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box;
   }
  
   body, html {
    height: 100%;
   }
  
  .container-form {
    width: 100%;  
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
  }
  
  .wrap-form {
    width: 500px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 42px 55px 45px 55px;
  }
  
  &lt;div class="container-form"&gt;
    &lt;div class="wrap-form"&gt;
      &lt;form&gt; ... &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I want to add a rounded sticker with an image inside at the top right. </p>
  
  <p>I created the following div in wrap-form:</p>
  
  <pre><code>.sticker {
    display: inline-block;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    position:absolute;
    top:10px;
    right:10px;
  }
  img {
    width: inherit;
    height: inherit;
    border-radius: inherit;
  }
  &lt;div class="sticker"&gt;
    &lt;img src="image.jpg" alt="alt" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the image is outside of the form... Do you have an idea why ?</p>
  
  <p>EDIT: see the code here: <a href="https://codepen.io/Old_Krupnik/pen/qBENRWL" rel="nofollow noreferrer">https://codepen.io/Old_Krupnik/pen/qBENRWL</a></p>