Solution 1 :

I’ve actually found this gist yesterday, which seems like a miracle fix for the border issue on the overflow item:

-webkit-mask-image: -webkit-radial-gradient(white, black);

Solution 2 :

This is more of a hack than a solution but it will work if the 5px x 5px corners that you are covering over are (broadly) a single colour.

The trick is to absolutely position ::before and ::after pseudo-elements to cover the corner edges which will otherwise shine through.

Working Example:

.main-info {
  position: relative;
  box-shadow: 0px 0px 3px 2px #221b25c7;
  border-radius: 5px;
  font-size: 0.75rem;
  overflow: hidden;
}

.main-info::before,
.main-info::after {
  content: '';
  position: absolute;
  bottom: 0;
  z-index: 12;
  width: 5px;
  height: 5px;
  background-color: rgb(71, 71, 71);
}

.main-info::before {
  left: 0;
}

.main-info::after {
  right: 0;
}

.main-info > .img {
  position: relative;
}

.text {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 0;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
  color: white;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  z-index: 5;
  line-height: 25px;
}

.text > .limit {
  color: white;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  max-width: 100%;
  width: 0;
  padding: 0 0.5rem;
}

.text > .limit {
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row m-5">
  <div class="col-8">
    <div class="main-info">
      <div class="img">
        <a href="#">
          <div class="text">
            <div class="limit">Hello World</div>
          </div>
          <img src="https://placehold.it/272x154" style="width: 100%">
        </a>
      </div>
    </div>
  </div>
</div>

Solution 3 :

Have you tried to add: “!important” ?

overflow: hidden !important;

Or clearing out the cache and reloading page?:

Crtl + F5

Problem :

I was trying to create a text overlay on top of an image, and I wanted to add a slight border-radius to it all. But I noticed that when adding border-radius: 5px and overflow: hidden to the parent, the image behind the overlay is still showing a small part of its border on the bottom corners, as if it forgot to hide a pixelated line there.

overflow (small grey line in bottom right corner from image still visible)

.main-info {
  box-shadow: 0px 0px 3px 2px #221b25c7;
  border-radius: 5px;
  font-size: 0.75rem;
  overflow: hidden;
}

.main-info > .img {
  position: relative;
}

.text {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 0;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
  color: white;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  z-index: 5;
  line-height: 25px;
}

.text > .limit {
  color: white;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  max-width: 100%;
  width: 0;
  padding: 0 0.5rem;
}

.text > .limit {
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row m-5">
  <div class="col-8">
    <div class="main-info">
      <div class="img">
        <a href="#">
          <div class="text">
            <div class="limit">Hello World</div>
          </div>
          <img src="https://placehold.it/272x154" style="width: 100%">
        </a>
      </div>
    </div>
  </div>
</div>

I’ve thought of just adding the border-radius to the children, but that gave the same result.

Comments

Comment posted by YTZ

I can’t deny that it “works”, but it’s a really specific solution. The background of the text-overlay gives a frosted glass effect, so when I’d replace the placeholder with a random image, these squares with a specific colour wouldn’t be very helpful. By any chance, do you know what the actual cause of this problem is?

Comment posted by Rounin – Standing with Ukraine

Yep, I figured it probably wouldn’t be sufficient, given that we are dealing with a translucent overlay. (As I said: more of a hack than a solution). The bottom line is, if your overlay (or anything overlaying your overlay) is anything short of opaque, then you will be able to see the edge shining through from underneath.

Comment posted by Rounin – Standing with Ukraine

I tend to think of

By