border-image实现与圆角渐变边框实例页面

<h4>1. 父元素圆角</h4>
<div class="father">
    <div class="border-gradient">圆角渐变边框</div>
</div>

<h4>2. clip-path剪裁</h4>
<div class="border-gradient clip-path">圆角渐变边框</div>

.border-gradient {
    padding: 30px;
    border-style: solid;
    border-image: linear-gradient(deepskyblue, deeppink) 20 / 10px;
}

.father {
    border-radius: 10px;
    overflow: hidden;
}
.clip-path {
    -webkit-clip-path: inset(0 round 10px);
    clip-path: inset(0 round 10px);
}

　border-image实现与圆角渐变边框 » CSS新世界demo演示 (cssworld.cn)