CSS设置边框颜色的全面教程

本文深入解析了CSS中border-color属性的使用方法，涵盖统一设置四边颜色、按顺时针顺序分别指定上右下左颜色、简写组合（如上下/左右或上/左右/下）以及单独控制某一边颜色的多种技巧，强调其必须与border-style（如solid、dashed）配合才能生效，并全面支持颜色名称、十六进制、RGB、RGBA、HSL等主流颜色格式，包括透明度控制，是前端开发者精准美化元素边框不可或缺的实用指南。

CSS 中的 border-color 属性用于设置元素边框的颜色。你可以为四个边分别指定颜色，也可以统一设置。

基本语法

1. 设置四条边为同一种颜色：

这会将上、右、下、左边框都设为红色。

2. 分别设置上、右、下、左的颜色（顺时针顺序）：

• border-color: red green blue yellow; → 上红、右绿、下蓝、左黄

3. 设置上下和左右颜色：

• border-color: red green; → 上下为红，左右为绿

4. 设置上、左右、下颜色：

• border-color: red green blue; → 上红，左右绿，下蓝

单独设置某一边颜色

你也可以只修改某一条边的颜色：

• border-top-color: red;
• border-right-color: blue;
• border-bottom-color: green;
• border-left-color: yellow;

配合 border-style 使用

注意：border-color 不会生效如果没有边框样式。必须先定义 border-style，比如 solid、dashed 等。

或者直接用简写：

颜色值写法

border-color 支持所有 CSS 颜色格式：

• 颜色名称：red, blue, green
• 十六进制：#ff0000, #00ff00, #0000ff
• RGB：rgb(255, 0, 0)
• RGBA：rgba(255, 0, 0, 0.5)（支持透明度）
• HSL/HSLA：hsl(120, 100%, 50%)

好了，本文到此结束，带大家了解了《CSS设置边框颜色的全面教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！