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

Question

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

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

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

我还没有找到在 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>