<div class="p-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nulla eu sapien congue, a ultrices felis rhoncus. Nunc nisl metus, commodo vitae facilisis nec,</div>
<div class="p-top" style="--a:15px;--border:5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nulla eu sapien congue, a ultrices felis rhoncus. Nunc nisl metus, commodo vitae facilisis nec,</div>
<div class="p-right" style="--a:20px;--border:4px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nulla eu sapien congue, a ultrices felis rhoncus. Nunc nisl metus, commodo vitae facilisis nec,</div>
<div class="p-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nulla eu sapien congue, a ultrices felis rhoncus. Nunc nisl metus, commodo vitae facilisis nec,</div>
<div class="b-left" style="--border:1px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nulla eu sapien congue, a ultrices felis rhoncus. Nunc nisl metus, commodo vitae facilisis nec,</div>
<div class="b-left" style="--a:20px;--d:30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nulla eu sapien congue, a ultrices felis rhoncus. Nunc nisl metus, commodo vitae facilisis nec,</div>
<div class="b-right" style="--a:25px;--d:40px;--border:5px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nulla eu sapien congue, a ultrices felis rhoncus. Nunc nisl metus, commodo vitae facilisis nec,</div>
<div class="b-right" style="--a:25px;--border:3px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nulla eu sapien congue, a ultrices felis rhoncus. Nunc nisl metus, commodo vitae facilisis nec,</div>

<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/qBjRPeV.js');
} else {
  alert("Your browser cannot run this demo. Consider Chrome or Edge instead")
}
</script>
@property --border{
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}
div[class] {
  --border:2px;
  width:150px;
  display:inline-block;
  margin:5px;
  font-size:12px;
  padding:10px;
  text-align:justify;
  font-family:sans-serif;
  background:#eee;
  clip-path:polygon(var(--path));
  position:relative;
  z-index:0;
}
div[class]:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  -webkit-mask:paint(polygon-border);
  background:#00a8c6;
}
div.p-bottom {
  --a:10px;
  --path:0 0,100% 0,100% calc(100% - var(--a)),calc(50% + var(--a)) calc(100% - var(--a)),50% 100%,calc(50% - var(--a)) calc(100% - var(--a)),0 calc(100% - var(--a));
  padding-bottom:calc(10px + var(--a));
}
div.p-top {
  --a:10px;
  --path:0 var(--a),calc(50% - var(--a)) var(--a),50% 0,calc(50% + var(--a)) var(--a),100% var(--a),100% 100%,0 100%;
  padding-top:calc(10px + var(--a));
}
div.p-left {
  --a:10px;
  --path:var(--a) 0,100% 0,100% 100%,var(--a) 100%,var(--a) calc(50% + var(--a)),0 50%,var(--a) calc(50% - var(--a));
  padding-left:calc(10px + var(--a));
}
div.p-right {
  --a:10px;
  --path:0 0,calc(100% - var(--a)) 0,calc(100% - var(--a)) calc(50% - var(--a)),100% 50%,calc(100% - var(--a)) calc(50% + var(--a)), calc(100% - var(--a)) 100%,0 100%;
  padding-right:calc(10px + var(--a));
}
div.b-left {
  --a:10px;
  --d:0px;
  --path:0 0,100% 0,100% calc(100% - var(--a)),var(--a) calc(100% - var(--a)),var(--d) 100%,0 calc(100% - var(--a));
  padding-bottom:calc(10px + var(--a));
}
div.b-right {
  --a:10px;
  --d:0px;
  --path:0 0,100% 0,100% calc(100% - var(--a)),calc(100% - var(--d)) 100%,calc(100% - var(--a)) calc(100% - var(--a)),0 calc(100% - var(--a));
  padding-bottom:calc(10px + var(--a));
}
registerPaint('polygon-border', class  {

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

    const points = properties.get('--path').toString().split(',');
    const b = parseFloat(properties.get('--border').value);
    const d = properties.get('--dash').toString().split(',');
    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 p = points[0].trim().split(/(?!\(.*)\s(?![^(]*?\))/g);
    p = cc(p[0],p[1]);
    ctx.beginPath();
    ctx.setLineDash(d);
    ctx.moveTo(p[0],p[1]);
    
    for (var i = 1; i < points.length; i++) {
      p = points[i].trim().split(/(?!\(.*)\s(?![^(]*?\))/g);
      p = cc(p[0],p[1]);
      ctx.lineTo(p[0],p[1]);
    }
    ctx.closePath();
    ctx.lineWidth = 2*b;
    ctx.strokeStyle = '#000';
    ctx.stroke();
  }

})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.