border设置渐变boder-radius不生效问题解决方案

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
 
    <body>
        <style>
            /* .content {
                width: 300px;
                height: 100px;
                border: 5px solid;
                box-sizing: border-box;
                border-radius: 50px;
                border-image: -webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%) 5;
            } */
            .content {
                width: 300px;
                height: 100px;
                box-sizing: border-box;
                padding: 1px;
                border-radius: 5px;
                background-image: -webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);
            }
            .box {
                width: 100%;
                height: 100%;
                border-radius: 4px;
                background: #fff;
            }
            .text {
                width: 200px;
                height: 200px;
                border: 1px solid;
                margin: 20px;
                border-radius: 5px;
            }
        </style>
        <div class="content"><div class="box"></div></div>
        <div class="text"></div>
    </body>
</html>