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

问题

I'm applying a 2px bottom border to a text field with a 4px corner radius on the container. Since the radius is larger than the border, it causes the border to curl around the edge. I want the border to stay flat along the bottom edge.

[DON'T want this: border wrapping border radius] https://imgur.com/JEfIkDE

[DO want this: bottom border remains straight] https://imgur.com/xkuQGME

I haven't found a way to fix this within the CSS. Will I have to place another div inside the container to make this work? Basically a 2px high box at the bottom of the container? If so, I would appreciate any help on how that would be structured.

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

回答1:

Use a gradient at the bottom:

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

If you simply want the visual you can omit the border

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

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

来源：https://stackoverflow.com/questions/57153309/how-to-prevent-single-sided-border-from-wrapping-around-border-radius