gradient background doesn't cover under border image

Question

I want background gradient to cover under border image as well. but sounds like It doesn't work at all! I have realized if I remove Border, It starts working in Mozilla but I want it to work in Google Chrome.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.cont {
  height: 200px;
  position: relative;
  background-image: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background-clip: border-box;
  background-repeat: no-repeat;

  border: 20px solid orange;
  border-image-source: url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png");
  border-image-slice: 25;
  border-image-repeat: round;
  border-image-width: 18px;
}
.cont > .insta {
  text-align: center;
  color: white;
  font-size: var(--default-font-size);
  margin: 0;
  padding: 0;
  position: absolute;
  width: 80%;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

    <div class="cont">
<p class="insta">
       Follow us on Instagram
    </p>   </div>
    

Answer 1

You could put the linear gradient as background to the before pseudo element, making that bigger than the actual element by the width of the border and positioning it respectively. It will then go under the border image of the main element.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.cont {
  height: 200px;
  position: relative;
  background-clip: border-box;
  background-repeat: no-repeat;
  border: 20px solid orange;
  border-image-source: url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png");
  border-image-slice: 25;
  border-image-repeat: round;
  border-image-width: 18px;
  position: relative;
}

.cont::before {
  content: '';
  position: absolute;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  top: -20px;
  left: -20px;
  z-index: -1;
  background-image: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.cont>.insta {
  text-align: center;
  color: white;
  font-size: var(--default-font-size);
  margin: 0;
  padding: 0;
  position: absolute;
  width: 80%;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

<div class="cont">
  <p class="insta">
    Follow us on Instagram
  </p>
</div>