[SOLVED] box-shadow inset leaves dark edge on a div

box-shadow inset leaves dark edge on a div

I've got a div on which i want to put an inset shadow to achieve a smooth Transition to the Background. The Problem is, that the outer most ring of Pixels is not affected by the shadow. If you take the border radius out the Problem is still present, but affects only the Bottom side of the rectangle.

https://codepen.io/FrozenYoghurt/pen/WNrjVRx

The divs do not contain anything.

.homescreen2 {
                display: grid;
                grid-gap: 0px;
                width: 100%;
                height: 100vh;
                padding-top: 110px;
                background-color: rgba(250,250,250,1.00);
                grid-template-columns:  repeat(31,  1fr);
                grid-template-rows:       repeat(17, 1fr);
                }
        .hometransition {
                transition: 0.7s;
        box-shadow: 0 0 15px 15px rgba(250,250,250,1) inset;
                }
        .homeimg01 {
                grid-column-start: 10;
                grid-column-end: 15;
                grid-row-start: 3;
                grid-row-end: 7;
                background-size: cover;
                background-position: center;
                background-color: rgba(250,250,250,1.00);
                background-image: url("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
                border-radius: 50%;
                }
        .homeimg01:hover {
                transform: scale(1.1);
                border-radius: 35%;
                }
        .hometext01 {
                grid-column-start: 10;
                grid-column-end: 15;
                grid-row-start: 8;
                grid-row-end: 9;
                }
        .homeimg02 {
                grid-column-start: 21;
                grid-column-end: 26;
                grid-row-start: 4;
                grid-row-end: 8;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/bvsPBgms/cat-1362565-639x647.jpg");
                border-radius: 50%;
                }
        .homeimg02:hover {
                transform: scale(1.1);
                }
        .homeimg03 {
                grid-column-start: 2;
                grid-column-end: 7;
                grid-row-start: 6;
                grid-row-end: 10;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/j2rrCbt7/cat-1378752-640x480.jpg");
                border-radius: 50%;
                }
        .homeimg03:hover {
                transform: scale(1.1);
                }
        .homeimg04 {
                grid-column-start: 26;
                grid-column-end: 31;
                grid-row-start: 9;
                grid-row-end: 13;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/wvNp6v8z/cat-1393633-639x461.jpg");
                border-radius: 50%;
                }
        .homeimg04:hover {
                transform: scale(1.1);
                }
        .homeimg05 {
                grid-column-start: 7;
                grid-column-end: 12;
                grid-row-start: 11;
                grid-row-end: 15;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/wBZz8NrF/cat-1395746-640x480.jpg");
                border-radius: 50%;
                }
        .homeimg05:hover {
                transform: scale(1.1);
                }
        .homeimg06 {
                grid-column-start: 18;
                grid-column-end: 23;
                grid-row-start: 12;
                grid-row-end: 16;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/zGd576Ss/cat-1404368-640x512.jpg");
                border-radius: 50%;
                }
        .homeimg06:hover {
                transform: scale(1.1);
                }

<div class="homescreen2">
    
        <div class="homeimg01 hometransition"></div>
        <div class="homeimg02 hometransition"></div>
        <div class="homeimg03 hometransition"></div>
        <div class="homeimg04 hometransition"></div>
        <div class="homeimg05 hometransition"></div>
        <div class="homeimg06 hometransition"></div>
        
</div>

I searched stackoverflows archives for a solution, but didn't find anything. I tried to cover it up with a border with the same Color as the Background and shadow, but it actually made it worse.

Solution

If you don’t want to alter the markup or use a pseudo element, you can add background-clip: content-box; padding: 1px; to hide the edge.

.homescreen2 {
  display: grid;
  grid-gap: 0px;
  width: 100%;
  height: 100vh;
  padding-top: 110px;
  background-color: rgba(250, 250, 250, 1.00);
  grid-template-columns: repeat(31, 1fr);
  grid-template-rows: repeat(17, 1fr);
}

.hometransition {
  transition: 0.7s;
  box-shadow: 0 0 15px 15px #fff inset;
}

.homeimg01 {
  grid-column-start: 10;
  grid-column-end: 15;
  grid-row-start: 3;
  grid-row-end: 7;
  background-size: cover;
  background-position: center;
  background-color: rgba(250, 250, 250, 1.00);
  background-image: url("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
  background-clip: content-box;
  padding: 1px;
}

<div class="homescreen2">
  <div class="homeimg01 hometransition"></div>
</div>