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

rob*_*ark 6 html css styling

我想实现这个目标

预期的

但是使用这个CSS

border-left: 3px solid red;
border-radius: 3px;
Run Code Online (Sandbox Code Playgroud)

它正在产生这个结果

我的结果

请忽略间距,我会添加

小智 3

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

.div{
margin-top:40px;
  width:50px;
  height:10px;
  border-radius:50px;
  background:red;
  transform:rotateZ(90deg);
}
Run Code Online (Sandbox Code Playgroud)
<div class="div"></div>
Run Code Online (Sandbox Code Playgroud)