border-imageを使うときborder-radiusが効かない

こんなふうに書く人多いと思うんですけど

button.css

#button { 
    border-image-source: linear-gradient(90deg, red, blue);
    border-radius: 15px;
}

これは効かないんですね
この下のように書けば、widthが1の丸角のボーダーが作れます

button.css

#button { 
    position: relative;
    background-color:white;
    border-radius: 15px;
}

#button::after {
    position: absolute;
    top: -1px; bottom: -1px;
    left: -1px; right: -1px;
    background: linear-gradient(90deg, red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}