HTML5本身不提供设置边框的语法，边框必须用CSS的border属性实现；常用写法为border: 1px solid #000;，其中粗细、样式、颜色三值缺一不可；推荐用class配合外部CSS而非内联style；注意inline元素边框显示限制及单侧边框用法；边框不显示需检查尺寸、权重和是否被border: 0覆盖。
HTML5 本身不提供设置边框的语法，边框必须用 CSS 的 border 属性实现。所谓“HTML5 设置边框”是常见误解，实际是给 HTML5 元素（如 <div>、<section>、<p>）应用 CSS 样式。
直接用 border 写实线边框
最基础也最常用的写法：在元素的 style 属性里写 border: 1px solid #000;。其中三个值缺一不可：
-
1px：边框粗细（可换为2px、0.5rem等） -
solid：边框样式，solid就是实线（别写成“solid”或‘solid’，CSS 里不用引号） -
#000：颜色（可写red、rgb(0,0,0)、transparent等）
示例：
<div style="border: 2px solid #333;">有实线边框</div>
用 class 配合外部 CSS 更规范
内联 style 适合快速调试，但项目中推荐用 class 分离结构与样式：
立即学习“前端免费学习笔记（深入）”；
- HTML 中：
<p class="bordered">段落加边框</p>
- CSS 中（
<style>或 .css 文件）：.bordered { border: 1px solid #ccc; } - 注意：如果元素默认是
display: inline（如<span>），border会生效但可能不显眼——因为 inline 元素的上下边框不影响行高，左右边框才明显；此时可加display: inline-block;或改用<div>等块级元素
只设某一边的实线边框（比如下划线效果）
不需要四边都画，可以用单侧属性精准控制：
-
border-bottom: 1px solid #e0e0e0;—— 常用于菜单项、输入框下划线 -
border-left: 2px solid #007bff;—— 适合作为强调色竖条 - 慎用
border-top给<h1>加顶线：部分浏览器默认margin会和边框重叠，建议同时设margin-top: 0;避免意外间距
遇到边框不显示？先检查这三处
实线边框“消失”通常不是 HTML5 的问题，而是 CSS 应用失败：
- 元素本身
width或height为0（比如空<div>），或内容被visibility: hidden/display: none隐藏 - CSS 选择器权重不够，被其他规则覆盖（用浏览器开发者工具检查 computed 样式，看
border是否被 strike-through） - 写了
border-style: none;或border: 0;在更早的样式里，它们会清掉所有边框（0不等于0px，它是关键字，表示“无边框”）
边框是视觉层的细节，但依赖盒模型、渲染流和层叠规则。写 border 很简单，让它稳定出现在该出现的位置，得盯住上下文。
