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

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

[不想要这个：边框环绕边框半径]https://i.stack.imgur.com/vxdM5.jpg https://i.stack.imgur.com/vxdM5.jpg

[确实想要这个：底部边框保持直]https://i.stack.imgur.com/c8sxN.jpg https://i.stack.imgur.com/c8sxN.jpg

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

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

在底部使用渐变：

.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>