css - How to bring the curved tail behind the img - Stack Overflow

I am trying to get the curved tail to be behind the image, but cannot achieve this. I've tried the z-index and it doesn't work.

.bubble {
  position: relative;
  height: 150px;
  width: 255px;
  margin-right: 5px;
  border-radius: 25px 25px 0 25px;
  border: 2px solid #fff;
  background-image: url(.jpg);
  background-size: contain;
}

.bubble::after {
  content: "";
  position: absolute;
  right: 0;
  background-color: transparent;
  bottom: -50px;
  height: 50px;
  z-index: 0;
  width: 25px;
  border-top-right-radius: 25px;
  box-shadow: 0 -25px 0 0 #fff;
}

<div class="bubble"></div>