<h2>Hover the shape to see the border-only version</h2>
<div style="width:150px;height:100px;--path:0 0,50% 40%,100% 0,100% 100%,50% 60%,0 100%;--radius:40px;"></div>

<div style="width:150px;height:100px;--path:0 50%,33% 0,66% 50%,100% 0,100% 50%,66% 100%,33% 50%,0 100%;--radius:10px;"></div>

<div style="width:150px;height:100px;--path:50% 0,100% 50% 0,50% 100%,0 50% 0;--radius:60px;"></div>
<div style="width:100px;height:100px;--path:25% 0,50% 25% 0,75% 0,100% 33%,50% 100% 0,0 33%;--radius:60px;"></div>

<div style="width:100px;height:100px;--path:0 0 0,50% 40%,100% 0 0,100% 100% 0,50% 60%,0 100% 0;--radius:100px;"></div>

<div style="width:100px;height:100px;--path:20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%;--radius:100px;"></div>

<div style="width:100px;height:100px;--path:20% 0%, 0% 20%, 30% 50% 0, 0% 80%, 20% 100%, 50% 70% 0, 80% 100%, 100% 80%, 70% 50% 0, 100% 20%, 80% 0%, 50% 30% 0;--radius:100px;"></div>

<div style="width:100px;height:100px;--path:20% 0%, 0% 20%, 30% 50% 20px, 0% 80%, 20% 100%, 50% 70% 20px, 80% 100%, 100% 80%, 70% 50% 20px, 100% 20%, 80% 0%, 50% 30% 20px;--radius:0px;"></div>

<div style="width:100px;height:100px;--path:0 0,100%  0 0,20% 20%,0 100% 0;--radius:25px;"></div>

<div style="width:100px;height:100px;--path:50% -100% 0,50% 50%,200% 50% 0,50% 50%,50% 200% 0,50% 50%,-100% 50% 0,50% 50%;--radius:55px;"></div>

<div style="width:100px;height:100px;--path:30% 0,70% 0,70% 100%,150% 100% 0,-50% 100% 0,30% 100%;--radius:50px;"></div>

<div style="width:100px;height:100px;--path:0 0,30% 0,30% 70%,100% 70%,100% 100%,0 100%;--radius:100px;"></div>

<div style="width:100px;height:100px;--path:50% 0 0,100% 100%,0 100%;--radius:100px;"></div>

<div style="width:100px;height:100px;--path:0 0,33% 50% 100px,50% 0,66% 50% 100px,100% 0,80% 100%,20% 100% ;--radius:0;"></div>

<div style="width:150px;height:100px;--path:40% 0 0,50% 50%,60% 0 0,100% 100%,0 100%;--radius:100px;"></div>

<div style="width:150px;height:100px;--path:75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%;--radius:10px;"></div>

<div style="width:150px;height:100px;--path:50% 0,100% 0,100% 50%,50% 50%,0 100% 0;--radius:50px;"></div>

<div style="width:150px;height:100px;--path:0 20%,50% 0,100% 20%,60% 50% 50px,100% 80%,50% 100%,0 80%,40% 50% 50px;--radius:0;"></div>

<div style="width:100px;height:100px;--path:50% 0%, 50% 50%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%;--radius:100px;"></div>

<div style="width:100px;height:100px;--path:50% 0%, 37.64% 11.96%, 20.61% 9.55%, 17.64% 26.49%, 2.45% 34.55%, 10% 50%, 2.45% 65.45%, 17.64% 73.51%, 20.61% 90.45%, 37.64% 88.04%, 50% 100%, 62.36% 88.04%, 79.39% 90.45%, 82.36% 73.51%, 97.55% 65.45%, 90% 50%, 97.55% 34.55%, 82.36% 26.49%, 79.39% 9.55%, 62.36% 11.96%;--radius:100px;"></div>

<div style="width:80px;height:100px;--path:0 0,100% 0,100% 20%,25% 20%,25% 40%,100% 40%,100% 100%,0 100%,0 80%,75% 80%,75% 60%,0 60%;--radius:100px;"></div>

<div style="width:200px;height:100px;--path:30% 0 0,50% 35%,70% 0 0,100% 100% 0,80% 80%,70% 100% 0,50% 70%,30% 100% 0,20% 80%,0 100% 0;--radius:100px;"></div>

<div style="width:100px;height:100px;--path:50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%;--radius:10px;"></div>

<div style="width:100px;height:100px;--path:50% 50%, 83% 12%, 100% 43%, 50% 50%, 68% 100%, 32% 100%, 50% 50%, 0% 43%, 17% 12%;--radius:50px;"></div>



<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/GREaoMJ.js');
} else {
  alert("Your browser cannot run this demo. Consider Chrome or Edge instead")
}
</script>
@property --radius{
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}
@property --border{
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

div[style] {
  display:inline-block;
  cursor:pointer;
  margin:10px;
  --border:5px;
  --t:0;
  -webkit-mask:paint(rounded-shape);
  position:relative;
}
div[style]:before {
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  --t:1;
}
div[style]:hover:before {
  -webkit-mask:inherit;
}

body {
  background:pink;
}
registerPaint('rounded-shape', class  {

  static get inputProperties() {
    return [
      '--path',
      '--radius',
      '--border',
      '--t',
      '--dash'
    ]
  }
  
  paint(ctx, size, properties) {

    const points = properties.get('--path').toString().split(',');
    var Ppoints = [];
    var Cpoints = [];
    var Radius = [];
    const r = parseFloat(properties.get('--radius').value);
    const b = parseFloat(properties.get('--border').value);
    const d = properties.get('--dash').toString().split(',');
    const t = parseInt(properties.get('--t'));
    const w = size.width;
    const h = size.height;
    
    const cc = function(x,y) {
      var fx=0,fy=0;
      if (x.indexOf('calc') > -1) {
        var tmp = x.replace('calc(','').replace(')','');
        if (tmp.indexOf('+') > -1) {
          tmp = tmp.split('+');
          fx = (parseFloat(tmp[0])/100)*w + parseFloat(tmp[1]);
        } else {
          tmp = tmp.split('-');
          fx = (parseFloat(tmp[0])/100)*w - parseFloat(tmp[1]);
        }
      } else if (x.indexOf('%') > -1) {
        fx = (parseFloat(x)/100)*w;
      } else if(x.indexOf('px') > -1) {
        fx = parseFloat(x);
      }
      
      if (y.indexOf('calc') > -1) {
        var tmp = y.replace('calc(','').replace(')','');
        if (tmp.indexOf('+') > -1) {
          tmp = tmp.split('+');
          fy = (parseFloat(tmp[0])/100)*h + parseFloat(tmp[1]);
        } else {
          tmp = tmp.split('-');
          fy = (parseFloat(tmp[0])/100)*h - parseFloat(tmp[1]);
        }
      } else if (y.indexOf('%') > -1) {
        fy = (parseFloat(y)/100)*h;
      } else if(y.indexOf('px') > -1) {
        fy = parseFloat(y);
      }
      return [fx,fy];
    }
   
    var N = points.length;
    for (var i = 0; i < N; i++) {
      var j = i-1;
      if(j<0) j=N-1;
      
      var p = points[i].trim().split(/(?!\(.*)\s(?![^(]*?\))/g);
      if(p[2])
        Radius.push(parseInt(p[2]));
      else
        Radius.push(r);
      p = cc(p[0],p[1]);
      Ppoints.push([p[0],p[1]]);
      var pj = points[j].trim().split(/(?!\(.*)\s(?![^(]*?\))/g);
      pj = cc(pj[0],pj[1]);
      Cpoints.push([p[0]-((p[0]-pj[0])/2),p[1]-((p[1]-pj[1])/2)]);
    }
    ctx.beginPath();
    ctx.moveTo(Cpoints[0][0],Cpoints[0][1]);
    var i;
    var rr;
    for (i = 0; i < (Cpoints.length - 1); i++) {
      var angle = Math.atan2(Cpoints[i+1][1] - Ppoints[i][1], 
                             Cpoints[i+1][0] - Ppoints[i][0]) -
                  Math.atan2(Cpoints[i][1] - Ppoints[i][1], 
                             Cpoints[i][0] - Ppoints[i][0]);
      if (angle < 0) {
        angle += (2*Math.PI)
      }
      if (angle > Math.PI) {
        angle = 2*Math.PI - angle
      }
      var distance = Math.min(Math.sqrt((Cpoints[i+1][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i+1][0] - Ppoints[i][0]) ** 2),
                              Math.sqrt((Cpoints[i][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i][0] - Ppoints[i][0]) ** 2));
      rr = Math.min(distance * Math.tan(angle/2),Radius[i]);
      ctx.arcTo(Ppoints[i][0], Ppoints[i][1], Cpoints[i+1][0],Cpoints[i+1][1], rr);
    }
  var angle = Math.atan2(Cpoints[0][1] - Ppoints[i][1], 
                             Cpoints[0][0] - Ppoints[i][0]) -
                  Math.atan2(Cpoints[i][1] - Ppoints[i][1], 
                             Cpoints[i][0] - Ppoints[i][0]);
   if (angle < 0) {
      angle += (2*Math.PI)
   }
   if (angle > Math.PI) {
      angle = 2*Math.PI - angle
   }
   var distance = Math.min(Math.sqrt((Cpoints[0][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[0][0] - Ppoints[i][0]) ** 2),
                              Math.sqrt((Cpoints[i][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i][0] - Ppoints[i][0]) ** 2));
    rr = Math.min(distance * Math.tan(angle/2),Radius[i]);
    ctx.arcTo(Ppoints[i][0], Ppoints[i][1], Cpoints[0][0],Cpoints[0][1], rr);
    ctx.closePath();
    
    
    if(t==0) {
      ctx.fillStyle = '#000';
      ctx.fill();
    } else {
      ctx.setLineDash(d);
      ctx.lineWidth = 2*b;
      ctx.strokeStyle = '#000';
      ctx.stroke();
    }
  }

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.