CSS 3特殊圆角边框求助：底部圆角无法正确实现

问题分析 #

你当前的代码里，选中的<a>标签仅设置了顶部圆角（border-radius: 5px 5px 0 0），父容器<ul>的底部边框直接贯穿，导致底部圆角无法显示；同时内联样式混杂在HTML中，不利于维护调试。

修改后的代码 #

CSS 部分

.test-container {
  margin-top: 20px;
}

.test {
  display: inline-flex;
  border-bottom: 2px solid #EEF7FF;
  /* 给整个标签栏底部添加圆角 */
  border-radius: 0 0 5px 5px;
  padding: 0;
}

.test li {
  list-style-type: none;
  margin: 0;
}

.test li a {
  text-decoration: none;
  padding: 5px 30px;
  color: #A6B5C7;
}

/* 选中状态样式统一移到CSS管理 */
.test li a.active {
  border-top: 2px solid #EEF7FF;
  border-left: 2px solid #EEF7FF;
  border-right: 2px solid #EEF7FF;
  border-bottom: 5px solid #fff;
  color: #000;
  border-radius: 5px 5px 0 0;
  /* 让底部白色边框刚好覆盖父容器的底部边框 */
  margin-bottom: -2px;
}

HTML 部分

<div class="test-container">
  <ul class="test">
    <li>
      <a class="active" href="">All</a>
    </li>
    <li>
      <a href="">Solved</a>
    </li>
  </ul>
</div>

关键调整点 #

• 移除所有内联样式，用.active类统一管理选中状态，提升代码可维护性。
• 给<ul>添加border-radius: 0 0 5px 5px，实现整个标签栏的底部圆角效果。
• 给选中的.active标签设置margin-bottom: -2px，让其底部白色边框刚好覆盖父容器的底部边框，避免出现缝隙。
• 简化<a>标签的padding写法，让代码更简洁。

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