box-shadow inset leaves dark edge on a div

Question

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.

Answer 1

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>

Answer 2

Really odd that it does that. Here's a workaround:

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

.hometransition {
  transition: 0.7s;
}

.homeimg01 {
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 6;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 1.00);
  background-image: url("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
  border-radius: 50%;
}

.inner {
  height: 100%;
  width: 100%;
  box-shadow: 0 0 15px 15px rgba(250, 250, 250, 1) inset;
  border-radius: 45%;
}

.homeimg01:hover {
  transform: scale(1.1);
}    

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

Have a div inside your image div and set the box shadow on that, then set it's border-radius to 45% instead of 50%.

Answer 3

Replace it with a pseudo element:

.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;
  position:relative;
}
.hometransition::before {
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  bottom:-1px;
  border-radius:inherit;
  box-shadow: 0 0 16px 16px 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>