(somewhat) Desired result

.parent {
    width: 600px;
    height: 300px;
    --border-opacity: 0.5;
    --border-color: rgba(229, 128, 255, var(--border-opacity));
    --inner-opacity: 0.2;
    --inner-bkg: rgba(255,255,255, var(--inner-opacity));
    background: #000;
}

.box {
  width:150px;
  height:100px;
  margin:10px;
  border:10px solid var(--border-color);
  background:
   radial-gradient(farthest-side at bottom right,#0000 98%, var(--border-color)) top left / 30px 30px,
   radial-gradient(farthest-side at top    right,#0000 98%, var(--border-color)) bottom left / 20px 20px,
   radial-gradient(farthest-side at bottom left ,#0000 98%, var(--border-color)) top right / 50px 50px,
   radial-gradient(farthest-side at top    left ,#0000 98%, var(--border-color)) bottom right/ 10px 10px,
   var(--inner-bkg);
  background-repeat:no-repeat;
  background-origin:padding-box;
}

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

Context:

1. The “box” div is repeated a number of times both vertically and horizontally, in a grid.
2. The grid itself has rounded corners, but bigger than the individual box, hence the example I gave with a bigger radius for the top right corner.
3. The grid sits on top of a video (for the purposes of this issue, consider the black background as the video)

Requirements

1. At certain timestamps in the video, the entire grid has various degrees of opacity (root of the problem)
2. Both the border, and the inner part of the box must have opacities that can be individually controlled.
3. The inner shape acts as a mask (cuts out the inside of the box) so the video behind can be seen. I also have to add a background to the inner shape to which opacity can be applied.
4. The “box” does not have fixed dimensions, so whatever solution may exist, needs to take into account responsiveness
5. CSS-only solution (no JS)

What I tried so far:

1. Using a CSS mask with an inline SVG rect
   • 2 problems with this approach
     • cannot control the radius on just one corner (except by adding a clip-path to it), and even so, the clip path won’t align properly with the parent’s border radius in responsive scenarios.
     • cannot/don’t know how to make the rect responsive (it would always need to be i.e. height: calc(100% - var(---border-width * 2))… same for width.
2. find a way to have a border with radius only on the inside (no luck)

The provided code snippet is the closest I’ve got to achieving what I need, but there are a few problems.

1. there’s a weird line on the right side (probably because both the border and the radial gradients have opacity and they intersect slightly) – breaker
2. seems so overly-complicated
3. the radius of the inner element is always fixed (as if the box itself were square), which is honestly something I can live with, though in a responsive environment, the expected result would be slightly different.
4. changing the --inner-opacity variable affects the border’s and the radial-gradient’s opacity as well – breaker