在CSS盒模型中，边框是盒子和外界视觉区分的重要部分。除了border-width控制粗细，border-color与border-style决定了边框呈现什么颜色和什么线条形态。灵活使用它们，不用图片也能做出层次分明的卡片、提示框等组件。
border-style的常见取值
border-style用来定义边框线型，常用值如下：
- none：无边框
- solid：实线
- dashed：虚线
- dotted：点线
- double：双线
- groove：3D凹槽
- ridge：3D凸槽
border-color的设定方式
border-color接受颜色名、十六进制、rgb等写法。它可以统一设四边，也可分别设上右下左。
基础示例
下面代码展示一个实线蓝边盒子：
.box {
width: 200px;
height: 100px;
border-width: 4px;
border-style: solid;
border-color: #3498db;
}
四边异色与异型
通过分别指定，可让盒子每条边风格不同：
.card {
border-width: 3px;
border-style: dashed solid dotted double;
border-color: red green blue orange;
}
结合使用美化卡片
将border-color与border-style组合，能快速建立视觉重点。例如警告框用红虚线，成功框用绿实线。
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.warn {
border-width: 2px;
border-style: dashed;
border-color: #e74c3c;
padding: 10px;
}
.ok {
border-width: 2px;
border-style: solid;
border-color: #2ecc71;
padding: 10px;
}
</style>
</head>
<body>
<div class="warn">注意：此项为必填</div>
<div class="ok">提交成功</div>
</body>
</html>
小结
善用border-color与border-style能低成本提升界面质感。建议从实线虚线起步，再尝试双线与多彩边框，逐步建立自己的样式规范。
cssborder-colorborder-style修改时间：2026-07-28 00:51:10