Css 在模糊图像上添加边框

我试图在模糊图像上添加一个实心边框，但边框没有显示出来

当我注释掉css中的模糊效果时，边框会显示出来（当然会有清晰的图像），但当我再次添加它们时，边框会消失。知道我做错了什么吗

以下是css：

.top-background-image {
  
      filter: blur(4px);
      -webkit-filter: blur(4px);
      width: 1600px;
      height: 800px;
      border: 5px solid #555;
     
    } 

Here is the function where the class is contained: 

    function TopContainer() {
  return (
    <div>
      <div >
      <img className="top-background-image" src="image.jpeg" alt="image"/>
      </div>
      <div>
      <h1 className = "mike animate__animated animate__fadeInLeftBig ">Hi, I'm a baker.</h1><span><h2 className="programmer animate__animated animate__fadeInRightBig animate__delay-1s" >a cookie shop for you.</h2></span>
      <img className ="image.jpg" alt="profile"/>
      </div>
      <div className="face">
      <MiddleContainer/>
      </div>
    </div>  
  )
}

。顶部背景图像{
过滤器：模糊（4px）；
-webkit过滤器：模糊（4px）；
宽度：1600px；
高度：800px；
边框：5px实心#555；
} 
下面是包含类的函数：
函数TopContainer（）{
返回(
嗨，我是面包师。给你的饼干店。
)
}

在

img

周围添加一个span，并在

span

上添加边框，而不是

img

：

.top-background-image {
      filter: blur(4px);
      -webkit-filter: blur(4px);
      width: 1600px;
      height: 800px;
} 

.imageBorder{
    border: 5px solid #555;
}

<span class="imageBorder"><img className="top-background-image" src="image.jpeg" alt="image"/></span>

。顶部背景图像{
过滤器：模糊（4px）；
-webkit过滤器：模糊（4px）；
宽度：1600px；
高度：800px；
} 
.imageBorder{
边框：5px实心#555；
}

您的HTML是什么样子的？请添加完整的代码。对不起，我刚才添加了上面的html问题。。。谢谢如果你能用Stackblitz或Repl.itAh复制这个演示会更好，我发现了。我刚用过！重要的边界和规格旁边，它的工作！