children div border with inner radius on a parent div that has background

Question

I have a parent div with some background image and try to put some child div into it. Each child div will have a black boarder with only inner radius, so the border could cover the background like in the picture. So basically it feels like the child div is a window with round corner shows the background.

Adding what I have done, tried to do it with two borders but I couldn't fill up the corner if the border width is thin

html:

<div class='parent'>
  <div class='borader1'>
    <div class='borader2'>
       baba
    </div>  
  </div>
</div>

css:

.parent {
  height: 100px;
  width: 100px;
  background: green;
}


.borader1 {
  border: 2px solid black;
  border-radius: 16px;
  height: 98px;
  width: 98px;
}

.borader2 {
  border: 2px solid black;
  position: relative;
  height: 98px;
  width: 98px;
  top: -2px;
  left: -2px;
}

https://jsfiddle.net/52vrb1m7/36/

Thank in advance.

Answer 1

You can rely on a pseudo element trick combined with mask like below:

 .box { display: grid; grid: auto-flow 1fr/1fr 1fr; width: 300px; aspect-ratio: 1; padding: 10px; gap: 10px; background: #000; position: relative; z-index: 0; }.box div { border-radius: 20px; -webkit-mask: linear-gradient(#000 0 0); }.box div::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url(https://picsum.photos/id/1069/400/400) center/cover; }

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

Answer 2

Without a code example it's hard to help you figure out what you need to do, but I am going to try.

I think you are asking for help on how to create the inner border on the bottom side of your rounded square. I am going to approach it using an :after on the box. Positioning it as an overlay and using calc with to make it slightly wider (equal to the border with) and using negative margins to push it outside of the viewable area, cutting it off with overflow: hidden; .

 *, *::before, *::after { box-sizing: border-box; }.boxes { display: flex; flex-wrap: wrap; width: calc(200px + 3px * 4); }.box { width: 100px; height: 100px; margin: 3px; border: 3px solid #6495ED; border-radius: 10px; background: no-repeat 50% 50% #ccc url('https://via.placeholder.com/100x100'); overflow: hidden; }.box::after { content: ''; display: block; position: aboslute; top: 0; left: 0; width: calc(100% + 3px * 2); height: calc(100% + 3px); margin: -3px 0 0 -3px; border: 3px solid black; border-radius: 10px; }

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