css - 使用边界图像会导致边界半径被忽略？

Question

我需要实现这个确切的东西，但是边界半径::after上有::before

.title {
    position: relative;
    display: inline-block;
    margin-bottom: 4.2rem;
    padding: 0.8rem 4rem;
}

.title:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient( 90deg, rgba(208, 27, 108, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 5rem;
}

.title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-radius: 5rem 0rem 0rem 5rem;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to right, red, rgba(0, 0, 0, 0)) 1 4%;
    z-index: -1;
}

<h1 class="title">This an awesome title</div>

应该是这个样子（请忽略“reach”下的背景）

但是由于某种原因border-radius: 5rem 0rem 0rem 5rem;被忽略了，