如何使用CSS为元素添加全边框波浪效果

我可以为元素添加上下或左右方向的波浪边框，但无法将这些mask组合起来实现全边框的波浪效果。

上下边框 #

.box {
background-color: aqua;
width: 500px;
height: 500px;
  --mask:
    radial-gradient(78.75px at 50% 111px,#000 99%,#0000 101%) calc(50% - 120px) 0/240px 51% repeat-x,
    radial-gradient(78.75px at 50% -51px,#0000 99%,#000 101%) 50% 60px/240px calc(51% - 60px) repeat-x,
    radial-gradient(78.75px at 50% calc(100% - 111px),#000 99%,#0000 101%) calc(50% - 120px) 100%/240px 51% repeat-x,
    radial-gradient(78.75px at 50% calc(100% + 51px),#0000 99%,#000 101%) 50% calc(100% - 60px)/240px calc(51% - 60px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

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

左右边框 #

.box {
background-color: aqua;
width: 500px;
height: 500px;
 --mask:
    radial-gradient(78.75px at 111px 50%,#000 99%,#0000 101%) 0 calc(50% - 120px)/51% 240px repeat-y,
    radial-gradient(78.75px at -51px 50%,#0000 99%,#000 101%) 60px 50%/calc(51% - 60px) 240px repeat-y,
        radial-gradient(78.75px at calc(100% - 111px) 50%,#000 99%,#0000 101%) 100% calc(50% - 120px)/51% 240px repeat-y,
    radial-gradient(78.75px at calc(100% + 51px) 50%,#0000 99%,#000 101%) calc(100% - 60px) 50%/calc(51% - 60px) 240px repeat-y;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

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

内容的提问来源于stack exchange，提问作者Josh Mountain