边框简写属性
最后更新：2026-09-13
border 边框简写属性
border 是 CSS 中最常用的边框简写属性，可以一次性设置元素的边框宽度、样式和颜色。它围绕在元素内容之外、内边距之内，是盒模型的重要组成部分。通过 border，你可以快速为元素添加可见的轮廓边界。
| 分类 | |
|---|---|
| 初始值 | medium none currentcolor |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | shadow |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
border: <border-width> || <border-style> || <color>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<border-width> || <border-style> || <color> | 值 | 边框宽度、样式、颜色的简写 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 使用简写 border 会同时设置四条边；若只想设置单边，可使用 border-top、border-right、border-bottom、border-left。
注意： border 简写会覆盖之前设置的 border-width、border-style、border-color；若只想改其中一项，建议改用对应的单独属性。
❓ 常见问题
Qborder 和 outline 有什么区别？
Aborder 是盒模型的一部分，绘制在内容与内边距之外，会占据空间并影响元素尺寸和布局；outline 绘制在边框之外，不占据空间、不影响布局，常用于键盘导航的焦点提示。需要装饰性边框用 border，需要不占空间的视觉提示（尤其是 focus 状态）用 outline。
Q为什么设置了 border 但看不到？
A最常见的原因是忘记设置 border-style。它的默认值是 none，必须显式指定（如 solid、dashed）边框才会显示。此外还要确认 border-width 不为 0，且颜色未被其他规则覆盖。建议直接用 border 简写一步设置三要素。
Qborder 简写中三个值的顺序有要求吗？
A没有硬性要求，浏览器会按值的类型自动识别，但约定俗成按 宽度-样式-颜色 书写，如 border: 1px solid #ccc;。注意：省略样式时默认是 none，边框不会显示；省略颜色时默认使用 currentcolor（当前文本颜色）。保持统一书写顺序有利于后期维护。
Q如何给四条边设置不同的边框？
A用单边简写 border-top、border-right、border-bottom、border-left 分别设置，或先用 border 设整体再覆盖单边。例如 border: 1px solid #ddd; border-bottom: 3px solid #e74c3c; 可实现只有底边加粗的高亮效果。
🏷️ 相关属性
💡 相关案例
📚 相关教程
