边框颜色属性
最后更新：2026-09-13
border-color 边框颜色属性
border-color 用于设置元素边框的颜色。支持所有 CSS 颜色格式，包括颜色名称、十六进制、rgb()、rgba()、hsl() 等。作为单独属性使用时，只控制边框颜色，不影响宽度和样式。
| 分类 | |
|---|---|
| 初始值 | currentcolor |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | color |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
border-color: <color>{1,4};⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<color> | 类型 | 边框颜色值 |
transparent | 关键字 | 透明边框 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： border-color 支持 1~4 个值，可分别为四条边指定不同颜色，例如：border-color: red green blue orange。
提示： 使用 transparent 可以创建透明边框，常用于 hover 时添加边框避免布局跳动。
❓ 常见问题
Qborder-color 的默认值是什么？
A默认值是 currentcolor，即自动使用元素当前的文本颜色（color 属性的值）。因此只设置 border-width 和 border-style 而不写颜色时，边框会跟随文字颜色变化。若想让边框独立于文本色，需显式指定，例如 border-color: #333;。
Q如何给四条边设置不同的颜色？
Aborder-color 支持 1~4 个值，按上右下左顺序分配：一个值四边同色；两个值分别对应上下、左右；三个值对应上、左右、下；四个值依次为上右下左。例如 border-color: red green blue orange;。也可以用 border-top-color 等单边属性精确控制某一条边。
Qborder-color 支持哪些颜色格式？
A支持全部 CSS 颜色格式：关键字（red、transparent）、十六进制（#9b59b6、#f00）、rgb()/rgba()、hsl()/hsla() 以及 currentcolor。rgba() 可做半透明边框，transparent 常作透明占位，hsla() 便于保持色相的同时调整透明度。
Q如何利用透明边框避免 hover 时布局跳动？
A先给元素设置 border: 2px solid transparent; 占位，hover 时只改变颜色，如 border-color: #3498db;。因为边框始终存在，元素尺寸不变，不会引起布局跳动。这是导航、按钮等交互元素最常用的防跳动技巧。
🏷️ 相关属性
💡 相关案例
📚 相关教程
