如何设置HTML input边框颜色且不影响其他边框属性？

当你单独设置border-color时，浏览器会触发默认的border-style: inset样式（这就是你看到的浮雕/内凹效果），同时部分浏览器会重置border-radius为0，导致圆角丢失。要只修改边框颜色且保留原有边框属性，可按以下方法处理：

方法一：显式指定边框样式和圆角 #

直接覆盖默认的边框样式为实心，同时恢复浏览器默认的圆角：

#myi {
    border-color: hotpink;
    border-style: solid;
    border-radius: initial; /* 继承浏览器默认圆角值 */
}

如果想自定义圆角大小，把initial换成具体数值（比如4px）即可。

方法二：使用边框简写属性（保留原有宽度） #

如果你知道input默认的边框宽度（通常是1px），可以用简写一次性设置，避免单独属性冲突：

#myi {
    border: 1px solid hotpink;
    border-radius: initial;
}

方法三：用盒阴影模拟边框（不改动原有边框） #

如果完全不想修改原有边框属性，可通过盒阴影模拟边框颜色：

#myi {
    box-shadow: 0 0 0 1px hotpink; /* 用1px阴影模拟边框 */
    border-color: transparent; /* 隐藏原有边框 */
}

这种方法会让阴影完全覆盖原有边框位置，同时保留原生圆角。

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