如何为导航栏元素的底部边框设置内上圆角？

很遗憾，单纯靠border-bottom属性没法实现底部边框内上角的圆角效果——因为border-bottom只能统一设置整条底部边框的样式，没办法单独对边框的某个局部（比如内上角）做圆角处理。

不过不用额外添加DOM元素，用CSS伪元素就能搞定，代码示例如下：

.nav-item {
  position: relative;
  padding: 0.5rem 1rem;
  /* 其他导航项基础样式 */
}

.nav-item:hover::after,
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px; /* 底部边框的高度 */
  background-color: #2563eb; /* 替换成你需要的边框颜色 */
  border-top-left-radius: 4px; /* 内上角左侧圆角 */
  border-top-right-radius: 4px; /* 内上角右侧圆角 */
}

这个方法用::after伪元素模拟底部边框，通过border-top-left-radius和border-top-right-radius直接设置内上角的圆角，完全不用额外加HTML元素，就能达到你要的设计效果。

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