How to round out corners when using CSS clip-path

use inset with round property :

inset(0% 45% 0% 45% round 10px)

An SVG filter can round any kind of clip-path. You simply need to apply it to a parent element. Adjust the stdDeviation to control the radius:

.box {
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.parent {
  filter: url('#goo');
  overflow:hidden;
  position: fixed;
  right:-50px;
  z-index: 1;
  margin-top: 10vw;
}

<div class="parent">
  <div class="box"></div>
</div>

<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>

Related: https://stackoverflow.com/a/65485455/8620333

I've recently found success experimenting with approaches like this...

SVG

<svg width="0" height="0">
  <defs>
    <clipPath id="clipped">
      <circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
      <circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
      <rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
      <rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
    </clipPath>
  </defs>
</svg>

CSS

.clipped {
  --myWidth: 100vw;
  --myHeight: 10rem;
  --myRad: 2rem;
  clip-path: url(#clipped);
}

I found this useful as compared to using border-radius with overflow set to hidden, because this approach doesn't create a BFC or break things like sticky position and css perspective effects. Also, this allows you to "inset" the position of the svg paths to clip inside the element with a "corner-radius" if you want.

You can also mess around with the circle to get some different effects.

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

Codepen

Too bad you can't combine the polygon and circle... or maybe you can and I haven't played around with it enough to figure it out. HTH

clip-path: inset(45% 0% 33% 10% round 10px)

I don't have a comment option yes, so I'm writing it as an answer..

you need to write as many points as possible to round the corner. Nothig else... for, example a few more points to make lower part bit rounder:

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);

oh, yes, or SVG as comment people here.. :)

You could use a child element and do a nested clip-path on that and the child's pseudo element. The parent will do a polygon clip on the shape first, then the pseudo will have an ellipse to round the borders. The clips will have a combined effect.

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
  margin-top: 15vh;
}

.parent div {
  clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}

<div class="parent">
  <div></div>
</div>

Here is the demo with some adaptations to illustrate what's going on:

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, yellow 210px);
  margin-top: 15vh;
}

.parent div {
  background-color: blue;
  clip-path: polygon(90% 0%, 90% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}

<div class="parent">
  <div></div>
</div>

The horizontal size and position of the ellipse can be used to get a different effect on the edges. Note that the background starting postion of the parent needs to be adjusted to the same value as the placement of the ellipse (last value in the clip-path) because it fills up whatever gets clipped off on the right side. This can be visualised by removing background-color: blue from .parent div in the second demo.

Here is an additional Codepen to to try it out.

In 2025 we get to use the shape CSS function, thank goodness. So, cutting out a shape (such as a fancy gradient glow around another object) is much easier, even if it still looks a bit intimidating at first.

The shape I specified in the code below is actually two shapes: a rectangle 50px larger than its parent and a rectangle the same size as its parent with manually rounded corners using the curve command, and the second shape is "cut out" while the first shape is what is allowed to show, thanks to the evenodd fill rule.

.thing-you-want-to-have-a-sweet-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
  --br: 10px; /* Border Radius */
  --dbr: 20px; /* double the Border Radius */
  border-radius: var(--br);
  filter: blur(var(--br));
  clip-path: shape(evenodd from -50px -50px, line to calc(100% + 50px) -50px, line to calc(100% + 50px) calc(100% + 50px), line to -50px calc(100% + 50px), close, line to var(--dbr) 0, line to calc(100% - var(--dbr)) 0, curve to 100% var(--dbr) with 100% 0, line to 100% calc(100% - var(--dbr)), curve to calc(100% - var(--dbr)) 100% with 100% 100%, line to var(--dbr) 100%, curve to 0 calc(100% - var(--dbr)) with 0 100%, line to 0 var(--dbr), curve to var(--dbr) 0 with 0 0);
}