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

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>

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

How to prevent single-sided border from wrapping around border radius?

css

border