title: how to create div with a smooth curved border
body: <p>i'm trying to recreate <a href="https://i.stack.imgur.com/4gwZT.png" rel="nofollow noreferrer">this</a> element</p>
  
  <p>I've created the following structure:</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>.slider-container { max-width: 300px; margin: 100px auto; background: red; position: relative; box-sizing: content-box; }
  
  
  .slider-background {     background: white;
      position: absolute;
      top: 10px;
      right: 10px;
      width: 90%;
      height: 90%;
      text-align: right;
      z-index: 1; }
      
  .slider-background a {
    padding: 15px 20px;
      display: block;
  }
  
  .slider-info {
    padding: 45px 30px;
  }
  .slider-content { position: absolute; top: 0; left: 0; z-index: 2; background: lightblue; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider-container"&gt;
  
    &lt;div class="slider-background"&gt;
      &lt;a href="#"&gt;more&lt;br&gt;info&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="slider-content"&gt;
      
      &lt;div class="slider-info"&gt;
        &lt;img src="https://via.placeholder.com/140x100"/&gt;
        &lt;h2&gt;
          lorem&lt;br&gt;&lt;b&gt;ipsum&lt;/b&gt;
        &lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
        &lt;/p&gt;
      &lt;/div&gt;
      
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But i'm not sure on how to recreate the curved angle on the top <code>div</code>, what would be the best solution to achieve that result?</p>