How to make the border color with grandient

Question

I am trying to have a button which's border and text is image:

<div class="button-container">
    <button class="button--cont"> Button</button>
</div>

.button-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.button--cont {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: 1px solid;
    border-image: -webkit-linear-gradient(180deg, pink, blue);
    border-image-slice: 1;
    background: -webkit-linear-gradient(180deg, pink, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 600% 600%;
    animation: animation 3s ease infinite;
}

With this approach text color is changed but border color doesnt change. How can I make border with radius also?