CSS边框由border-width、border-style和border-color三个属性组成，可分别设置边框的宽度、样式和颜色，其中border-style是必需的，否则边框不显示；可通过简写属性border一次性定义宽、样、色，推荐顺序为width style color，如border: 2px solid blue，并支持单独设置某一边，如border-top；实际开发中建议使用简写提升效率。
在CSS中，边框是元素外观的重要组成部分。通过设置边框的宽度、样式和颜色，可以显著提升页面的视觉效果。CSS提供了多种方式来定义边框，其中最基础且常用的是 border-width、border-style 和 border-color 这三个属性。它们共同构成元素的边框样式，也可以通过简写属性 border 一次性设置。
border-width：设置边框的宽度
该属性用于定义边框的粗细，单位通常使用像素（px），但也支持其他长度单位如 em、rem、pt 等。
可以为四条边分别设置不同的宽度，语法如下：
- border-width: 1px; — 四条边均为 1px 宽
- border-width: 2px 4px; — 上下为 2px，左右为 4px
- border-width: 1px 2px 3px 4px; — 顺时针顺序：上、右、下、左
也可以单独设置某一边：
立即学习“前端免费学习笔记（深入）”；
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
border-style：设置边框的样式
这是控制边框“外观类型”的关键属性。即使设置了宽度和颜色，若没有定义样式，边框也不会显示。
常见取值包括：
- solid — 实线边框
- dashed — 虚线边框
- dotted — 点状边框
- double — 双线边框
- groove — 凹槽效果
- ridge — 槽脊效果
- inset — 内嵌效果，使元素看起来“凹进去”
- outset — 外凸效果，看起来“凸出来”
- none 或 hidden — 无边框（none 不占空间，hidden 常用于表格边框隐藏）
同样支持四边独立设置：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
border-color：设置边框的颜色
定义边框的颜色，支持十六进制、rgb、rgba、hsl、关键字等所有CSS颜色格式。
- border-color: red;
- border-color: #00ff00;
- border-color: rgba(0, 0, 0, 0.5); — 支持透明度
也可按边分别设置：
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
注意：如果未设置 border-color，默认会继承文本颜色（color 属性）。
综合使用与简写语法
虽然可以单独设置每个属性，但更常见的做法是使用简写形式 border 或分方向简写如 border-top。
例如：
- border: 2px solid blue; — 同时设置宽、样、色
- border-top: 1px dashed #ccc; — 仅设置上边框
简写顺序不强制，但推荐按 width style color 书写，便于阅读。
还可以分别设置四个边：
- border: 1px solid black;
- border-left: 3px solid red; — 单独覆盖左边框
基本上就这些。掌握 border-width、border-style、border-color 的用法，就能灵活控制元素边框的表现。实际开发中建议优先使用简写，提高效率，同时注意 border-style 是必须的，否则边框不会显示。
