How to curve a custom polygon element with a clip-path property?

Question

I have a problem implementing a button with **CSS **and the concept of this button is like the picture below.

I found that the better solution can be **polygon **and clip-path property, but it is true that when you use polygon, you can't set radius for the corners.

Notice: It is important to find a solution that can utilize dynamic content and dynamic sizes of elements.

This is the concept:

And this is my implementation with clip-path:polygons (tailwindcss).

<div
 class="w-[172px] h-12 mb-10 bg-[#F5910D] flex items-center justify-center"
 style="clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)"
 >
     <span class="text-white text-lg font-bold">All Products</span>
 </div>

Does anyone have any solution?

I tried to use SVG filter and the stdDeviation attribute but it wasn't working for polygons.