How to make filter Blur pick up the whole element. Prevent Blur from ending before the end of the element background

Question

I have a div who is with filter:blur(), but I noticed that the blur means it is inside the element. What I mean is that when you reach the box-model boundary the image of background begins to disappear before the edge, giving the impression that the background does not occupy the whole element.

Notice the image above, see that the image is already disappearing before it even reaches the edge.

Notice the code that the two .box has the same size, and see how the blur does not complete the entire content. Is there any way to fix this problem?

div {float:left}
.box {
  width: 300px;
  height: 300px;
  background-image: url(https://placecage.com/300/300);
  filter: blur(5px);
}
.box2 {
  width: 300px;
  height: 300px;
  background-color: red;
}

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

The intention is for the box to look like this, with 100% of the background content with blur

Answer 1

When you apply Blur to div, I don’t see how to prevent the edges from being blurred. One way is to insert the background image into a child element (a span, for example) and apply overflow: hidden in div. So the background image will not extrapolate the area of div:

.box {
   position: relative;
   width: 300px;
   height: 300px;
   overflow: hidden;
   background-color: blue;
}

.box span{
   display: inline-block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   background-image: url(https://placecage.com/300/300);
   filter: blur(5px);
   transform: scale(1.07);
}

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