是否有可能将左边框完全变圆？答案

【问题标题】：Is it possible to have a border-left completely rounded?是否有可能将左边框完全变圆？
【发布时间】：2023-02-08 23:02:23
【问题描述】：

我正在重做我的应用程序中的一些 UI 内容，并希望替换以下内容： What I have

有了这个： What I want

目前 HTML 如下所示：

<div class="row required">
<label for="NumericFieldStartKm-numericfield">Kilometer at start</label>
<input id="NumericFieldStartKm-numericfield" value="" class="required numbercontrol mbsc-comp" min="1" max="" readonly="">
</div>

CSS 看起来像这样：

.row.required {
  border-left: 7px solid #C30000;
  padding-left: 7px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-left: 4px !important;
}

当然我可以添加一个 div 并将该 div 塑造成药丸并将其放在标签和输入的前面，但这需要我更改大量代码。当我对 CSS 进行相同的更改时，可以节省我数小时的工作时间，所以这就是为什么我更愿意通过一些 CSS 魔术来完成它。

我发现了一些关于使用 ::after 或其他伪元素的事情，但我不知道我是否可以仅使用 CSS 实现我想要实现的目标。

【问题讨论】：

标签： css border border-radius

【解决方案1】：

下面是一个使用 ::before 伪元素绘制边框的示例。
我们对伪元素使用float: left，并为.row设置固定宽度，使得浮动伪元素之后的元素垂直堆叠。

.row.required {
  width: 200px;
}

.row.required::before {
  content: "";
  float: left;
  height: 40px;
  margin-right: 4px;
  border-left: 7px solid #C30000;
  border-radius: 6px;
}

<div class="row required">
  <label for="NumericFieldStartKm-numericfield">Kilometer at start</label>
  <input id="NumericFieldStartKm-numericfield" value="" class="required numbercontrol mbsc-comp" min="1" max="" readonly="">
</div>

【讨论】：