title: CSS speech bubble with rounded arrow
body: <p>I'm trying to recreate the following image in CSS:</p>
  
  <p><a href="https://i.stack.imgur.com/tvswT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tvswT.png" alt="enter image description here"></a></p>
  
  <p>I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image.
  Any idea? Thanks.</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>.speech-bubble {
      position: relative;
      background: #ff0d1e;
      display: inline-block;
      width: 239px;
      height: 95px;
      margin: 40px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
  }
  
  .speech-bubble:after {
      content: "";
      position: absolute;
      top: 25px;
      left: -32px;
      width: 0;
      height: 0;
      border-style: inset;
      border-width: 0 32px 20px 0;
      border-color: transparent #ff0d1e transparent transparent;
      -webkit-transform:rotate(360deg);
      -moz-transform:rotate(360deg);
      transform:rotate(360deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="speech-bubble"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>