css - 如何像google一样自定义css边框？

Question

所以我想在 Firebase 的文档中使用与 Google 的 UI 类似的边框。 https://firebase.google.com/docs/cloud-messaging/您可以在导航栏下方的蓝色大框中看到一个选项卡列表。我怎样才能通过在顶部也有 flex 半径来为我的选项卡添加底部边框？我了解如何使用 css 创建底部边框，但我对如何添加顶部曲线一无所知。

.navbar-light .navbar-nav .nav-link {
    border-bottom: 2px Solid #fff;
}

Answer 1

好吧，我尝试用 border top left 和 right 属性来解决这个问题:看看，这可能对你有帮助

#example1 {
  border: 2px solid #0277bd;;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

<div>Document</div>
<div id="example1">
</div>