Add border to a shape built using CSS mask

I have an image that has a -webkit-mask applied to it, and I need to apply a border to the resulting shape. Unfortunately, the mask breaks the border. How do I apply a border around the entirety of this masked image?

html:

<div class="container">
  <img src="https://i.imgur.com/E5Y8wev.jpeg" />
</div>

css:

.container{ height:100vh; width:100vw; display:flex; justify-content:center; align-items:center;
  img { width:50%; height:auto; border:15px solid red;
    -webkit-mask:
      radial-gradient(circle 10vw at top    left ,#0000 98%,#000) top    left,
      radial-gradient(circle 10vw at top    right,#0000 98%,#000) top    right,
      radial-gradient(circle 0 at bottom left ,#0000 98%,#000) bottom left,
      radial-gradient(circle 0 at bottom right,#0000 98%,#000) bottom right;
    -webkit-mask-size:51% 51%;
    -webkit-mask-repeat:no-repeat;
  }
}

https://jsfiddle.net/n3kzyujg/

Here is an easier way to implement this with less of code and more accurate for the border

.box {
  --b: 6px;  /* border thickess */
  --s: 30px; /* size of the cut */
  --c: red;
  
  background: var(--c);
  display: inline-grid;
  --_s:var(--s)
}
img {
  width: 300px;
  border: var(--b) solid var(--c);
  --_s: calc(var(--s) + var(--b));
}

.box, 
.box img {
  mask: 
   radial-gradient(var(--_s) at var(--_s) 0,#0000 calc(100% - 1px),#000)
   calc(-1*var(--_s)) 0;

}

<div class="box">
  <img src="https://i.imgur.com/E5Y8wev.jpeg" />
</div>