Css Background filter blur, how to remove from border to make the outline clearer?-CodePudding

I have a background to which I have applied filter: blur (5px); I like the effect I got. However I wish the border wasn't so blurry. So I followed this question How to remove white border from blur background image but I can't take it off, can anyone give me a suggestion on how to do it? I appreciate any response, thanks.

.main_container {
  position:relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
  border-radius: 6px;
}

.left_container {
  width: 70%;
}
.right_container {
  width: 30%;
  border-radius: 0px 6px 6px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box_left {
  width: 70%;
  margin: 20px;
  display: flex;
  flex-direction: column;
}
.box_right {
  width: 80%;
  padding: 20px;
  z-index: 999;
  position: relative;
}

img.attachment-full.size-full {
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 50%) 0px 5px 10px -5px;
}

.prd-img {
  display: block;
  background-size: cover;
  background-repeat: no-repeat; 
  height:300px;
  width:100%;  
  border-radius: 6px;
}

.blured-img{
  background-size: cover;
  background-repeat: no-repeat; 
  position:absolute; 
  top:0; 
  height:100%;
  width:100%; 
  filter:blur(5px);
}

<div >
            <div >
              <div ><!-- Head Box Thankyou Page -->
                  <h1>Some title here</h1>
                <p >
                  Some text here
                </p>
                
              </div>
            </div>

            <div > 
              <div >
                 <div  style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
              </div>
              <div  style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
            </div>
</div>

CodePudding user response：

Just set overflow: hidden to .right_container

.main_container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
  border-radius: 6px;
}

.left_container {
  width: 70%;
}

.right_container {
  width: 30%;
  border-radius: 0px 6px 6px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box_left {
  width: 70%;
  margin: 20px;
  display: flex;
  flex-direction: column;
}

.box_right {
  width: 80%;
  padding: 20px;
  z-index: 999;
  position: relative;
}

img.attachment-full.size-full {
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 50%) 0px 5px 10px -5px;
}

.prd-img {
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  border-radius: 6px;
}

.blured-img {
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  filter: blur(5px);
}

<div >
  <div >
    <div >
      <!-- Head Box Thankyou Page -->
      <h1>Some title here</h1>
      <p >
        Some text here
      </p>

    </div>
  </div>

  <div >
    <div >
      <div  style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
    </div>
    <div  style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
  </div>
</div>