如何防止单边边框环绕边框半径？

Question

我将 2px 底部边框应用于容器上角半径为 4px 的文本字段。由于半径大于边框，因此会导致边框围绕边缘卷曲。我希望边框沿底部边缘保持平坦。

[不要这样：边框环绕边框半径]https://imgur.com/JEfIkDE

[想要这个：底部边框保持笔直] https://imgur.com/xkuQGME

我还没有找到在 CSS 中解决此问题的方法。我是否必须在容器内放置另一个 div 才能完成这项工作？容器底部基本上是一个 2px 高的盒子？如果是这样，我将不胜感激有关如何构建的任何帮助。

.textfield {
    border-bottom: 2px solid #1A1446;
    border-radius: 4px;
 }

Answer 1

在底部使用渐变：

.box {
  width:200px;
  height:100px;
  border-bottom:5px solid transparent; /*keep it transparent*/
  background:
    linear-gradient(#1A1446,#1A1446) bottom/100% 5px border-box no-repeat,
    yellow;
  border-radius: 10px;
}

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

如果你只是想要视觉效果，你可以省略边框

.box {
  width:200px;
  height:100px;
  background:
    linear-gradient(#1A1446,#1A1446) bottom/100% 5px no-repeat,
    yellow;
  border-radius: 10px;
}

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