如何解决在border-image和border-radius同时出现时圆角不显示问题

.main {
    width: 212px;
    height: 44px;
    box-sizing: border-box;
    padding: 1px;
    border-radius: 22px;
    margin: 0px 614px;
    margin-top: 32px;
    // background-image: -webkit-linear-gradient(90deg, rgba(24, 191, 246, 1), rgba(24, 117, 246, 1));
    background-image: -webkit-linear-gradient(226deg, rgba(255, 120, 167, 1), rgba(104, 62, 231, 1), rgba(1, 128, 232, 1)) 
}
.main_in {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background: #181818 ;
    display: flex;
    align-items: center;
    padding: 4px;

}