How to fix transparent border going past gradient background image

I currently have a div with a gradient as a background image.

However, the problem I get is that the transparent border has some weird issue which is caused by the fact that the background image doesn't cover the area that the border does. image of what is happening

This is currently what I have:

<div className="flex items-center justify-center gap-2 bg-grad rounded-full px-3 py-20 border-[3px] border-white/30">
    <p className="text-xl font-semibold text-white">Our Mission</p>
    <Image src="/rocket_launch.svg" alt="" width={10} height={10}/>
</div>

with .bg-grad defined as:

.bg-grad {
    background-image: linear-gradient(90deg, #FFB74A 0%, #FF4AA1 45%, #6F2BFF 100%);
  }

You could use a background-size larger than 100% (horizontally) and a horizontal background-position of -3px like in this example (some settings are guessed, but the principle should be clear from the example):

.bg-grad {
  background-image: linear-gradient(90deg, #FFB74A 0%, #FF4AA1 45%, #6F2BFF 100%);
  background-position: -3px 0;
  background-size: 105% 100%;
}

.other_stuff {
  display: inline-block;
  border: 3px solid #FFFFFF22;
  padding: 12px;
  border-radius: 20px;
}

<div class="bg-grad other_stuff">This is the text</div>