Возможно, это дубликат в 'Можно использовать радиус границы вместе с изображением границы, имеющим градиент?' и там мало кто использует полные подсказки.Как бы то ни было, я нашел простое решение из git hub для вашей проблемы, но оно не решит проблему полностью, поскольку мы не можем сделать фон прозрачным с помощью этого трюка CSS, но толькоможет иметь сплошной цвет или градиент, как вы хотите.Проблема здесь объясняется в одном из ответов на вышеупомянутый вопрос.в соответствии с этим мы не можем получить прозрачные фоны с радиусом границы и градиентами, поскольку эффект градиента применяется как свойство border-image в CSS.Идите, обратитесь к этой проблеме и посмотрите принятый ответ.Кстати вот обещанное хитрое решение.
body{
padding: 10%;
box-sizing: border-box;
}
.border-container{
display: flex;
width: 100%;
height: 200px; /* to set the div visible, since without height it won't display if it does not have any elements inside */
border: double 4px transparent;
border-radius: 25px;
background-image: linear-gradient(#fff,#fff ), radial-gradient(circle at top left, #ef1eef,#163ae0);
background-origin: border-box;
background-clip: content-box, border-box;
}
<body>
<div class="border-container">
<!-- your elemnts -->
</div>
</body>