如何用CSS为Div左侧添加椭圆形状边框（不新增元素）

可以实现，不用额外添加HTML元素，通过CSS伪元素::before就能达成需求。核心思路是把原div的左侧边框替换成一个绝对定位的伪元素，给这个伪元素设置椭圆形状的圆角，其余边框保留原样式即可。

修正后的代码： #

<html>
  <body>
      <div style="position: relative; border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; height:120px;">
      </div>
  </body>
</html>

div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 5px; /* 对应原左侧边框宽度 */
  height: 100%; /* 和父元素高度一致 */
  background-color: #c8c6c4; /* 原左侧边框颜色 */
  border-radius: 5px 0 0 5px; /* 上下圆角半径等于宽度，形成半圆，整体呈现椭圆效果 */
}

原理说明： #

• 给父div设置position: relative，让伪元素可以基于父元素定位
• 伪元素::before生成一个宽5px、高100%的矩形，放在父元素左侧
• 通过border-radius: 5px 0 0 5px，让伪元素的上下两个左角形成半圆（因为宽度是5px，圆角半径等于宽度时，刚好是半圆），这样整个伪元素就呈现竖放的椭圆形状，替代原左侧边框
• 父元素保留上、右、下的普通边框，最终效果就是左侧椭圆边框，其余边框正常

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