CSS Gradient Border with Rounded Corners has Unexpected Gap Between Background and Border

I am looking to create a button with a gradient border that fades-in and out on hover:

Codepen here:

background: linear-gradient(rgb(25, 25, 25), rgb(25, 25, 25)) padding-box, linear-gradient(160deg, #2787FF, #54D1A4) border-box;

However, using the border-box and padding-box on the background of the element causes an unexpected space on the corners of the button, causing the gradient border to peer through before hovering.

Is it possible get rid of this small space while keeping the existing animation style of the gradient border fading in and out?