可以只设一边边框颜色，推荐使用 border-top-color 等单边属性；必须配合 border-style 才生效，且注意 border 简写会重置 color。
border-color 能不能只设一边颜色
可以，但得用单边属性更稳妥。border-color 本身支持四值语法（上 右 下 左），比如 border-color: red green blue yellow，但容易记混顺序，尤其在配合 border-style 或 border-width 使用时，三者缩写进 border 后优先级会干扰单边控制。
真正想改某一边，直接用 border-top-color、border-right-color 这类单边属性，语义清晰、无歧义、调试时也容易定位。
- 别写
border-color: #f00 transparent transparent transparent来模拟只有上边框——透明色不是“没边框”，它仍占渲染空间，且可能被后续border缩写覆盖 - 如果已用
border: 1px solid #ccc，再单独设border-bottom-color: red是有效的，浏览器会叠加生效 - 注意：IE8+ 支持单边 color 属性，但 IE7 及更早版本不支持，若需兼容，老项目得退回四值
border-color写法
border-color 设置后没生效的常见原因
最常被忽略的是：没有同时设置 border-style。CSS 规范规定，border-color 不会显示，除非 border-style 不是 none 或 hidden。哪怕写了 border-color: red，只要没配 border-style: solid（或 dashed 等），边框就是不可见的。
- 检查 computed styles，看
border-style是否为none——很多重置 CSS（如 normalize.css）默认设了border-style: none - 避免用
border: 0清除边框，它等价于border-width: 0，但会把border-color和border-style一并重置为初始值，导致后续 color 设置失效 - 使用简写
border时，如果只写border: 1px #f00，缺少 style 值，部分浏览器会忽略整条声明
border-color 支持哪些颜色值
所有标准 CSS 颜色表示法都可用，包括关键字（red）、十六进制（#ff0000）、rgb/rgba（rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)）、hsl/hsla，甚至 currentColor。
立即学习“前端免费学习笔记（深入）”；
关键限制在于：透明度必须通过 rgba() 或 hsla() 显式声明，hex 和关键字不带 alpha；transparent 是独立关键字，等价于 rgba(0,0,0,0)，但它不是“无颜色”，而是有明确渲染行为的透明色。
-
border-color: currentColor会让边框颜色跟随文字颜色，适合主题切换场景，但注意继承链中断时会回退到 initial 值（通常是black） - 不要用
border-color: inherit期望继承父元素边框色——border-color默认不继承，inherit会取父元素计算后的 color 值，不是边框色 - 渐变色不能直接用于
border-color，如需渐变边框，得用background-image+padding模拟，或border-image
border-color 在缩写 border 里的优先级关系
当 border 简写和独立 border-color 同时存在时，简写声明会重置所有子属性（color/style/width），之后再写的 border-color 才会覆盖它。顺序很重要。
例如：border: 1px solid #999; border-color: #f00; → 底色是红色；但反过来：border-color: #f00; border: 1px solid #999; → 底色是灰色，红色被覆盖。
- 避免在同一个选择器里混用
border和单个border-*属性，容易因书写顺序翻车 - 用预处理器（如 Sass）时，注意
@extend或@include可能隐式插入border简写，意外覆盖你手动写的border-color - 调试时，在 DevTools 里看 Styles 面板，被划掉的
border-color表示它被更高优先级的简写覆盖了
border-color 看似简单，但实际卡点都在 style 是否启用、简写是否冲突、以及透明/继承这些隐含行为上。改颜色前，先确认边框“存在”比调色更重要。
