能否用CSS实现带border radius的纯边框式Tabbed navbar？

当然可以用CSS实现这种效果，核心思路是利用父容器的边框+圆角，配合子标签的边框偏移、激活状态下的边框隐藏来达成。下面是完整的实现代码：

HTML结构 #

<div class="tab-container">
  <div class="tabs">
    <button class="tab active">标签1</button>
    <button class="tab">标签2</button>
    <button class="tab">标签3</button>
  </div>
  <div class="tab-content">
    内容区域
  </div>
</div>

CSS样式 #

.tab-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 500px;
  overflow: hidden; /* 确保内部元素不会超出圆角范围 */
}

.tabs {
  display: flex;
  position: relative;
  top: 1px; /* 让标签的顶部边框和容器边框重叠 */
}

.tab {
  background: transparent;
  border: 1px solid #ccc;
  border-bottom: none; /* 隐藏标签底部边框，避免和容器边框重复 */
  border-radius: 8px 8px 0 0;
  padding: 8px 16px;
  margin-right: 4px;
  cursor: pointer;
  position: relative;
  top: 1px; /* 微调标签位置，让激活时的边框完全贴合容器 */
}

.tab.active {
  border-color: #333;
  background: #fff; /* 激活时背景设为白色，覆盖容器边框 */
}

.tab-content {
  padding: 16px;
}

关键细节说明 #

• 父容器tab-container设置统一的边框和圆角，用overflow: hidden确保内部元素不会突破圆角
• 标签栏tabs通过position: relative和top: 1px，让标签的顶部边框与容器边框重叠，避免出现双重边框
• 每个标签隐藏底部边框，激活时设置背景为白色，同时调整边框颜色，实现“嵌入”容器边框的效果
• 标签的圆角只保留顶部两个角，和容器的圆角呼应

内容的提问来源于stack exchange，提问作者Mahade Walid