HTML5中border是CSS属性,需通过style或外部样式表设置;内联实线边框写法为style="border: 1px solid #000;",宽度、样式、颜色三值缺一不可;仅设单边用border-top等更安全;inline元素需设display:block/inline-block才显边框。

HTML5 本身不提供设置边框的语法,border 是 CSS 属性,必须通过 style 或外部样式表控制。
直接用 style 写内联边框
最简实线边框写法就是给元素加 style="border: 1px solid #000;"。其中三个值缺一不可:宽度、样式、颜色。
-
1px可换成2px、0.5rem等,但不能省略单位(0除外) -
solid是唯一能实现“实线”的关键字;dashed、dotted都不算 -
#000可替换为red、rgba(0,0,0,0.8),但不能留空——没颜色就看不到边框
border 缩写 vs 单独设某一边
想只给上边加实线?别用 border 缩写,改用 border-top:
style="border-top: 2px solid #333;"
常见误操作是写成 border: 2px solid; —— 缺少颜色,浏览器会按默认色(通常是黑色)渲染,但某些环境(如部分邮件客户端或旧版 WebView)可能完全不显示。
立即学习“前端免费学习笔记(深入)”;
- 四边统一:用
border - 仅单边/三边/对边:优先用
border-top/border-left/border-inline等,语义更准、覆盖更安全 - 注意:
border: none会清掉所有边框,包括用border-top单独设过的,顺序很重要
为什么加了 border 却没显示?
最常被忽略的是元素默认 display 类型和尺寸问题:










