How to smoothen (like a border-radius) the borders of the clipped button using clip path?

Question

Is there a way to smoothen the curve of the clipped button using clip path?

Here's the code:

div {
  padding: 56px 96px;
}

.clipped-btn {
  border-radius: 8px;
  padding: 16px 32px;
  clip-path: polygon(0 0, 90% 0, 100% 29%, 100% 100%, 0 100%, 0% 50%);
}

<div>
   <button class="clipped-btn">I am clipped</button>
</div>

I tried the solution found on this link but it doesn't work.

here's the code:

div {
  padding: 56px 96px;
}

.clipped-btn {
  border-radius: 8px;
  padding: 16px 32px;
  clip-path: polygon(0 0, 90% 0, 100% 29%, 100% 100%, 0 100%, 0% 50%);
  filter: url('#goo');
}

<div>
   <button class="clipped-btn">I am clipped</button>
   <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>
</div>