这个问题我之前也踩过坑！默认给输入框加border-bottom和border-radius时，因为border-radius是作用于元素四个角的，而其他三边没有边框，所以底部的圆角只会在左右两端露出一小截，没法形成完整的圆角矩形边框。下面分享几个纯CSS的实用解决方案：

方法一：伪元素模拟底部边框（最推荐） #

通过给输入框添加::after伪元素来完全自定义底部边框，这是兼容性最好、灵活性最高的方案。

<input type="text" class="rounded-bottom-input">

.rounded-bottom-input {
  /* 移除原有边框，避免干扰 */
  border: none;
  /* 为伪元素提供定位基准 */
  position: relative;
  /* 根据需求调整内边距 */
  padding: 10px 12px;
  /* 可选：添加输入框背景色 */
  background-color: #f8f8f8;
}

.rounded-bottom-input::after {
  content: "";
  /* 绝对定位到输入框底部 */
  position: absolute;
  bottom: 0;
  left: 12px; /* 和输入框左右内边距保持一致，让边框和输入内容对齐 */
  right: 12px;
  /* 控制底部边框的高度与颜色 */
  height: 3px;
  background-color: #1976d2;
  /* 圆角值设为高度的一半，刚好形成标准圆角矩形 */
  border-radius: 1.5px;
}

这个方法的优势在于：你可以随意调整边框的位置、粗细、圆角大小，甚至给边框加hover动画都非常方便。

方法二：内阴影（box-shadow）实现 #

如果不想用伪元素，也可以用inset内阴影快速模拟效果，代码更简洁：

.rounded-bottom-input {
  border: none;
  padding: 10px 12px;
  background-color: #f8f8f8;
  /* 只给底部两个角设置圆角 */
  border-radius: 0 0 2px 2px;
  /* 用内阴影模拟底部边框：水平偏移0，垂直偏移-3px，模糊0，扩散3px（对应边框高度） */
  box-shadow: inset 0 -3px 0 0 #1976d2;
}

不过这个方法有个小局限：阴影会完全贴合输入框的圆角，如果输入框是透明背景，可能会看到阴影的边角痕迹，适合有背景色的场景。

方法三：透明边框兜底（不推荐） #

还有一种思路是给输入框设置完整边框，但把上、左、右三边设为透明，只保留底部颜色：

.rounded-bottom-input {
  border: 3px solid transparent;
  border-bottom-color: #1976d2;
  border-radius: 2px;
  padding: 10px 12px;
}

但这个方案的问题很明显：输入框的点击区域会因为透明边框变大，而且如果输入框有背景色，透明边框区域也会透出背景，视觉上可能不符合预期，所以一般不建议用。

内容的提问来源于stack exchange，提问作者Nishchey Inderesh