<div class="element">test
  <p class="announce">Sorry 😥<br>Your browser does not support the Paint API<br>Try with chrome!</p>
</div>

<script>
  CSS.registerProperty({
    name: "--cornerbox-length",
    syntax: "<length>",
    inherits: false,
    initialValue: "120px",
  });
  CSS.registerProperty({
    name: "--cornerbox-width",
    syntax: "<length>",
    inherits: false,
    initialValue: "16px",
  });
  CSS.paintWorklet.addModule('https://codepen.io/tomquinonero/pen/eYRXbRL.js');
</script>

body {
  font-family: sans-serif;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #f5b4a5;
}
.element {
  background: #5f64e2;
  color: #f5b4a5;
  font-size: 2.2em;
  text-align: center;
  padding: 2.4rem;
  width: 12rem;
  height: 12rem;
  --cornerbox-color: #5f64e2;
  --cornerbox-length: 100px;
  --cornerbox-width: 5px;
  background: paint(cornerbox);
  transition: --cornerbox-length 800ms ease-in-out,
  --cornerbox-width 800ms ease-in-out;
}

.element:hover {
  --cornerbox-length: 160px;
  --cornerbox-width: 8px;
}

@supports (background: paint(cornerbox)) {
  .announce {
    display: none;
  }
}

class cornerBox {
  static get inputProperties() {
    return [`--cornerbox-width`, `--cornerbox-length`, `--cornerbox-color`];
  }

  paint(ctx, size, props) {
    const lineBox = parseInt(props.get(`--cornerbox-length`));
    const lineBoxwidth = parseInt(props.get(`--cornerbox-width`));
    const colorBox = props.get(`--cornerbox-color`).toString().trim();
    if (lineBox != 0) {
      ctx.lineWidth = lineBox;
      ctx.beginPath();

      /* UP Left */
      ctx.moveTo(0, 0);
      ctx.lineTo(0, lineBoxwidth);
      ctx.moveTo(0, 0);
      ctx.lineTo(lineBoxwidth, 0);

      /* Up Right */
      ctx.moveTo(size.width - lineBoxwidth, 0);
      ctx.lineTo(size.width, 0);
      ctx.moveTo(size.width, 0);
      ctx.lineTo(size.width, lineBoxwidth);

      /* Down Left */
      ctx.moveTo(0, size.height - lineBoxwidth);
      ctx.lineTo(0, size.height);
      ctx.moveTo(0, size.height);
      ctx.lineTo(lineBoxwidth, size.height);

      /* Down Right */
      ctx.moveTo(size.width, size.height - lineBoxwidth);
      ctx.lineTo(size.width, size.height);
      ctx.moveTo(size.width, size.height);
      ctx.lineTo(size.width - lineBoxwidth, size.height);

      ctx.strokeStyle = colorBox;
      ctx.stroke();
    }
  }
}

registerPaint("cornerbox", cornerBox);