How to change the border-top-right-radius in css?

.box {
  --b:5px;
  --s:20px;
  --c:green;

  width:50px;
  height:60px;
  display:inline-block;
  margin:10px;
  border:var(--b) solid var(--c);
  clip-path:polygon(0 0,calc(100% - var(--s)) 0,100% var(--s),100% 100%,0 100%);
  background:
    linear-gradient(to bottom left,var(--c) calc(50% - 0.3*var(--b)),#0000 0),
    conic-gradient(at left var(--b) bottom var(--b),#0000 90deg,var(--c) 0);
  background-position:top right;
  background-size:var(--s) var(--s);
  background-repeat:no-repeat;
}

<div class="box"></div>
<div class="box" style="--b:2px;--c:red;"></div>
<div class="box" style="--b:2px;--s:10px;--c:blue;"></div>
<div class="box" style="--b:8px;--s:30px;--c:purple;"></div>