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

Question

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 class="main_container">
            <div class="left_container">
              <div class="box_left"><!-- Head Box Thankyou Page -->
                  <h1>Some title here</h1>
                <p class="info-post-purchuase t2-light">
                  Some text here
                </p>
                
              </div>
            </div>

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

You're talking about the blue border? Cause I don't it is blur even a `px` — Kunal Tanwar, Jul 27 '22 at 13:48
No, excuse my bad explanation. I mean the background behind, the one where the filter blur is applied. — Snorlax, Jul 27 '22 at 14:36
Thanks, it worked. I didn't know overflow could do this too. — Snorlax, Jul 27 '22 at 14:41
@KunalTanwar In this case when there is no answer to accept how do you mark the question to indicate that it has a solution? — Snorlax, Jul 27 '22 at 14:45

score 1 · Accepted Answer · answered Jul 27 '22 at 14:49

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 class="main_container">
  <div class="left_container">
    <div class="box_left">
      <!-- Head Box Thankyou Page -->
      <h1>Some title here</h1>
      <p class="info-post-purchuase t2-light">
        Some text here
      </p>

    </div>
  </div>

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

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

1 Answers1