How to make div with round corner totally opaque inside, but colored outside (between round border line and original border-box line)?

Question

Let's say I have an image as the background of a parent (green) element.

In child (grid) elements I want to partially "cover" it. Given a child element with rounded corners:

• I want NOT to "cover" the image inside the border (orange), but
• I WANT to "cover" outside (yellow): between the border line to original border-box line.

By "cover" I mean filling with some color with 0% opacity, and by not covering I mean the orange part should be totally opaque. (If the green part would represent the image itself, the user should see the same green instead the orange.)

Introducing a new element between the green parent and orange childs to fill the yellow/outer part with some color would make the orange/inside part also colored, so thats not a solution.

I suspect this can be done with SVG, but I do not know how - and maybe there is another way to do it.

Answer 1

You can consider a radial-gradient coloration for your element to achieve this.

Here is an example:

.wrapper {
  padding:50px;
  display:inline-block;
  font-size:0;
  background:url(https://picsum.photos/id/1069/1000/800) center/cover;
}
.wrapper > div {
  width:150px;
  height:150px;
  display:inline-block;
  background:
    radial-gradient(farthest-side at bottom right,transparent 98%,yellow 100%) top left,
    radial-gradient(farthest-side at bottom left ,transparent 98%,yellow 100%) top right,
    radial-gradient(farthest-side at top    left ,transparent 98%,yellow 100%) bottom right,
    radial-gradient(farthest-side at top    right,transparent 98%,yellow 100%) bottom left;
  background-size:30px 30px;
  background-repeat:no-repeat;
}

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>