如何制作带有半径的渐变顶部边框？

Question

我一直在尝试为具有半径的盒子制作渐变顶部边框。渐变边框应仅在框的顶部，并且需要与框的其余部分具有相同的半径（5px）。最终结果应如下所示：

我当前的代码：

.card {
  text-align: center;
  margin: 0 1%;
  background-color: #252a41;
  border-radius: 5px;
  border: none;
  width: 25%;
  padding: 3% 0;
}

.instagram {
  border-top: 3px solid rgb(243, 242, 241);
  border-radius: 5px;
  border-image: linear-gradient(to right, #fdc468, #ffa263, #ff806c, #f9607f, #df4996) 1 / 3px 0px 0px 0px / 0px 0px 0px 0px round;
  position: relative;
}

<div class="card instagram">
  <div class="row">
    <img src="images/icon-instagram.svg" alt="instagram icon" />
    <span class="small-text username">@realnathanf</span>
  </div>
  <h1 class="followers-count">11k</h1>
  <p class="small-text followers">FOLLOWERS</p>
  <div class="row">
    <img src="images/icon-up.svg" alt="icon up" />
    <span class="change change-up">1099 Today</span>
  </div>
</div>

显然，border-image属性与边框半径不兼容，因此我必须制作一个before / after伪元素。但是我无法弄清楚如何使它达到理想的效果。

Answer 1

您只能在有背景的情况下这样做：

.box {
  width:200px;
  height:200px;
  border-radius:5px;
  background:
     linear-gradient(to right, #fdc468, #ffa263, #ff806c, #f9607f, #df4996) top/100% 5px no-repeat,
     #000;
}

<div class="box">

</div>