border-color用于设置边框颜色，需先定义border-style；border-radius实现圆角效果，两者可同时使用。示例中通过border-color指定四色边框，border-radius设为15px实现圆角，结合使用可创建美观的彩色圆角方块，若只需单色可简写为border: 3px solid #000配合border-radius: 10px。
在CSS中，可以通过 border-color 设置边框颜色，结合 border-radius 实现圆角效果。这两个属性可以同时使用，让元素边框既美观又具有视觉层次。
设置边框颜色（border-color）
border-color 用于定义元素四条边的边框颜色。可以分别设置上、右、下、左的颜色，也可以统一设置。
示例：-
border-color: red;— 四边均为红色 -
border-color: red blue green yellow;— 顺时针设置四边颜色 -
border-top-color: red;— 单独设置上边框颜色
注意：必须先定义边框样式（如 border-style: solid），否则边框不会显示。
添加圆角（border-radius）
border-radius 控制边框的圆角程度，值越大，圆角越明显。
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 10px;— 四个角均为10像素圆角 -
border-radius: 5px 10px;— 水平和垂直方向不同圆角 -
border-radius: 50%;— 制作圆形（常用于头像）
border-color 与 border-radius 组合使用
两者互不影响，可同时应用在一个元素上。
完整示例：
.box {
width: 100px;
height: 100px;
border: 2px solid;
border-color: #007acc #ff6b6b #4ecdc4 #ffd93d; /* 四色边框 */
border-radius: 15px;
background-color: #f8f9fa;
}
这个例子创建了一个带彩色边框和圆角的方块。如果只想设置单一颜色，也可简写为：
.simple {
border: 3px solid #000;
border-radius: 10px;
}
基本上就这些。只要记得先设置 border-style 或使用 border 简写，颜色和圆角就能正常显示。
