如何将圆角边框仅应用于元素的左侧

Question

我想实现这个目标

预期的

但是使用这个CSS

border-left: 3px solid red;
border-radius: 3px;

它正在产生这个结果

我的结果

请忽略间距，我会添加

Answer 1

使用border-top-left-radius和border-bottom-left-radius

.div{
margin-top:40px;
  width:50px;
  height:10px;
  border-radius:50px;
  background:red;
  transform:rotateZ(90deg);
}

<div class="div"></div>