css - 在模糊的图像上添加边框

Question

我试图在模糊的图像上添加实心边框，但边框没有显示。
当我在 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>  
  )
}

Answer 1

在 img 周围添加跨度并将边框放在 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>