如何创建带半径的渐变顶部边框？

<style>
    .container {
        position: relative;
        width: 200px;
        height: 200px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        overflow: hidden;
    }

    .container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 20px;
        background: linear-gradient(to right, #ff0000, #00ff00);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
</style>

<div class="container">
    <!-- 内容 -->
</div>