html中无独立边框标签，必须用css控制；内联style="border:1px solid #000;"需三值齐全；常见失效原因包括颜色与背景同色、overflow:hidden裁剪、inline元素不占布局空间及box-sizing计算偏差。
HTML 本身没有“添加边框”的独立标签或属性，边框必须通过 CSS 控制；直接写 适合临时调试、单次展示或邮件 HTML 等受限环境。写法简单： 常见错误现象： 这是常规项目该用的方式。关键点不是“会不会写”，而是“写在哪”和“被谁覆盖”。 立即学习“前端免费学习笔记（深入）”； 使用场景：组件化开发中，常需要给 不是代码写错，而是渲染逻辑没理清。最常卡在这三处： 边框本质是绘制在元素盒模型的“边框层”上，它不改变文档流，但会影响尺寸计算和视觉权重。改边框前，先看一眼 border 在 HTML 标签里（比如 <div border="1">）是过时且无效的。<h3>用 <code>style 写内联 border 最快但不推荐
style="border: 1px solid #000;"。注意三个值缺一不可：宽度、样式、颜色；只写 border: 1px; 或 border: solid; 都不会生效。border 看不见——可能是颜色和背景一样（比如 #fff 在白色背景上），也可能是父容器 overflow: hidden 裁掉了边框。
border 是简写，等价于同时设 border-width、border-style、border-color
border-top、border-left 等，避免覆盖其他三边已有的设置border-radius 后边框自动跟随弧度，无需额外处理
border 在外部 CSS 文件里怎么写才不踩坑border 容易被重置样式（如 * { border: 0; }）或更高优先级选择器干掉。.card、.input 这类类名统一加边框，但又不能影响按钮或链接。
.form-input { border: 1px solid #ccc; }），别依赖元素名（如 input），否则所有 <input> 都被套上边框:focus（键盘用户需要），否则可访问性不达标border: none 清除默认边框时，要确认是否真想清——比如 <button></button> 默认有边框，清了可能看起来像没反应为什么
border 设了却看不见？几个真实原因
display: inline（如 <span></span>），border 会存在，但高度/宽度不占布局空间，容易误判为“没显示”font-size: 0 或 line-height: 0，导致内联元素的 border 被压缩到视觉不可见box-sizing: border-box，但你按 content-box 的逻辑去算尺寸，结果边框挤占了内容宽度，内容被截断或换行box-sizing 和 display 类型——这两个比 border 本身更容易让你花半天找问题。
