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

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 属性与边框半径不兼容，所以我必须制作一个之前/之后的伪元素。但是我不知道如何制作一个以获得所需的结果。

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>