如何避免Tab组件选中项底部边框随容器圆角弯曲

我有一个Tab组件，其容器带有border radius（圆角），选中的Tab项会显示底部边框。问题是当前底部边框会随容器圆角向上弯曲，而我希望它保持水平，如下方图片所示的预期效果：

预期效果

已尝试方案
我尝试了多种方法，以下是一个基础示例：选中的Tab带有底部边框，但边框会超出容器圆角而非被截断，这不符合需求。我也尝试过使用:after CSS样式缩短边框，但这样边框会过短，无法像预期效果那样与圆角自然衔接。

body {
  background-color: #121212;
}

.wrapper {
  padding: 15px;
}

.tabs {
  background-color: #211F22;
  border-radius: 15px;
  display: flex;
  height: 60px;
}

.tab {
  align-items: center;
  color: white;
  display: flex;
  flex: 1;
  justify-content: center;
}

.selected {
  border-bottom: 2px solid #7D53DA;
}

<div class="wrapper">
  <div class="tabs">
    <div class="tab selected">
      Tab 1
    </div>
    <div class="tab">
      Tab 2
    </div>
  </div>
</div>

我还尝试让Tab项控制圆角，代码如下：

body {
  background-color: #121212;
}

.wrapper {
  padding: 15px;
}

.tabs {
  background-color: #211F22;
  display: flex;
  height: 60px;
}

.tab {
  align-items: center;
  color: white;
  display: flex;
  flex: 1;
  justify-content: center;
}

.first {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.last {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.selected {
  border-bottom: 2px solid #7D53DA;
}

<div class="wrapper">
  <div class="tabs">
    <div class="tab first selected">
      Tab 1
    </div>
    <div class="tab last">
      Tab 2
    </div>
  </div>
</div>

但这种方法的问题是边框会随圆角向上弯曲，同样不符合需求。请问如何用CSS实现这种设计效果？

可以通过伪元素+容器裁剪或自定义裁剪路径两种方式实现，核心是让选中Tab的底部边框不受圆角影响，同时与容器圆角自然衔接。

方法一：伪元素+容器裁剪 #

body {
  background-color: #121212;
}

.wrapper {
  padding: 15px;
}

.tabs {
  background-color: #211F22;
  border-radius: 15px;
  display: flex;
  height: 60px;
  /* 关键：裁剪超出容器圆角的内容 */
  overflow: hidden;
  position: relative;
}

.tab {
  align-items: center;
  color: white;
  display: flex;
  flex: 1;
  justify-content: center;
  position: relative;
}

.tab.selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #7D53DA;
  /* 让伪元素向两侧延伸，确保被容器圆角截断后长度合适 */
  width: calc(100% + 30px);
  margin: 0 -15px;
}

<div class="wrapper">
  <div class="tabs">
    <div class="tab selected">
      Tab 1
    </div>
    <div class="tab">
      Tab 2
    </div>
  </div>
</div>

原理 #

1. 容器.tabs设置overflow: hidden，自动裁剪超出圆角范围的内容；
2. 选中Tab的伪元素::after作为底部边框，宽度设为比Tab本身宽（数值等于容器圆角半径的2倍），通过负margin向两侧延伸；
3. 延伸部分被容器圆角裁剪，最终呈现水平边框与圆角自然衔接的效果。

方法二：自定义裁剪路径（clip-path） #

body {
  background-color: #121212;
}

.wrapper {
  padding: 15px;
}

.tabs {
  background-color: #211F22;
  border-radius: 15px;
  display: flex;
  height: 60px;
  position: relative;
}

.tab {
  align-items: center;
  color: white;
  display: flex;
  flex: 1;
  justify-content: center;
  position: relative;
}

.tab.selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #7D53DA;
  /* 根据容器圆角半径裁剪两侧区域 */
  clip-path: inset(0 15px 0 15px);
}

原理 #

直接用clip-path: inset(0 15px 0 15px)裁剪掉伪元素两侧对应圆角半径的部分，不需要调整宽度和margin，就能让边框保持水平且不随圆角弯曲。

内容的提问来源于stack exchange，提问作者Barry Michael Doyle