通过border-color或border简写可设置网页容器边框颜色，支持1-4个值分别定义四边颜色，配合border-style生效，推荐使用简写border: width style color统一设置，结合十六进制、RGB、HSL等色彩及圆角阴影提升设计感。
设置边框颜色是美化网页容器的重要方式之一。通过CSS的 border-color 属性，你可以为元素的四条边框分别或统一指定颜色，从而增强视觉层次和设计感。
基本用法：使用 border-color 设置颜色
border-color 可以接受1到4个颜色值，分别对应上、右、下、左四个方向的边框：
- 一个值：四边统一颜色
- 两个值：上下、左右
- 三个值：上、左右、下
- 四个值：上、右、下、左（顺时针）
示例：
div {border-width: 2px;
border-style: solid;
border-color: red blue green yellow;
}
简写形式更高效：使用 border 属性
实际开发中，通常使用 border 简写属性一次性设置边框的样式、宽度和颜色，更加简洁：
立即学习“前端免费学习笔记（深入）”；
- border: 1px solid #ccc;
- border-top: 2px dashed red;
- border-left: 3px double #000;
这样可以避免单独设置 border-color 前忘记定义 border-style 导致边框不显示的问题。
使用现代色彩提升设计感
除了命名颜色（如 red、blue），你还可以使用十六进制、RGB、HSL 或透明色来创造更细腻的视觉效果：
- #ff6b6b — 柔和红
- rgb(72, 179, 223) — 清新蓝
- hsl(120, 50%, 75%) — 柔和绿
- rgba(0, 0, 0, 0.1) — 微透黑，适合阴影边框
搭配圆角（border-radius）和阴影（box-shadow），能让容器更具现代感。
实用技巧与注意事项
确保边框生效，必须先定义 border-style（如 solid、dashed），否则即使设置了颜色也不会显示。
- 可单独设置某一边颜色：border-right-color: #f39c12;
- 配合:hover状态动态改变边框色，实现交互反馈
- 在响应式设计中，小屏幕可使用浅色边框减少压迫感
基本上就这些。合理使用 border-color 或 border 简写，结合色彩搭配，能显著提升容器的视觉表现力。不复杂但容易忽略细节。
