如何为div设置底部仅中间显示、角落隐藏的半边框？

你当前的代码只处理了右侧边框的遮挡，要让左右角落都隐藏，只需要新增一个:before伪元素来覆盖左侧区域即可。

修改后的CSS代码如下：

.bd{
  border-bottom:1px solid black;
  position: relative;
  /* 可选：给元素加些内边距，让内容和边框有间距 */
  padding: 8px 0;
  background-color: white; /* 确保伪元素背景和父元素一致 */
}
.bd:before, .bd:after{
  content: "";
  width:25%;
  height:1.1px;
  background-color:white;
  position: absolute;
  bottom:-1px;
}
.bd:before{
  left:0;
}
.bd:after{
  right:0;
}

HTML部分保持不变：

<div class="bd">Example</div>

原理说明 #

• 通过父元素的border-bottom绘制完整的底部边框
• 利用:before和:after两个伪元素，分别在左侧和右侧生成与父元素背景色相同的遮罩块，宽度各占25%
• 两个遮罩块刚好覆盖住左右两端的边框区域，只保留中间50%的边框可见
• 注意调整伪元素的height和bottom值，确保完全覆盖边框，避免出现缝隙

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