最可靠方式是用 CSS border 属性；HTML5 无边框标签，需元素配合 CSS；border 必须写全宽度、样式、颜色，如 border: 1px solid #ccc；outline 非边框，不可替代；border-radius 和 transparent 边框需注意旧版兼容性。
直接用 border CSS 属性最可靠
HTML5 本身没有“边框”标签或属性，所有边框控制都交给 CSS。想给元素加基础边框，border 是唯一通用且兼容性最好的方式。别被“HTML5 设置边框”这种说法误导——它本质是 HTML 元素 + CSS 样式配合的结果。
常见错误是试图用 典型错误场景：为了“不影响宽高”而用 立即学习“前端免费学习笔记（深入）”； 比如 / 错误：只写样式，无宽度 → 无边框显示 /
.bad { border: dashed; } / 错误：用 outline 模拟边框 /
.wrong { outline: 2px solid blue; } 边框看着简单，但真正卡住人的往往是默认值（比如
border 是简写属性，推荐一次性写全：宽度、样式、颜色，例如 border: 1px solid #ccc;
border: solid;）会导致边框不可见——因为默认宽度为 0px
border-top、border-left 等细分属性更精准style="border: ..."）可快速验证，但正式项目应写进 或外部 CSS 文件
outline 不是边框，别拿来替代 border
outline 常被误认为“另一种边框”，但它不占据布局空间、不能设圆角、不支持单边设置，且默认用于表单焦点提示。用它模拟边框容易引发定位错乱和可访问性问题。outline 代替 border——这会让响应式计算失效，尤其在 flex/grid 布局中。
outline 不会触发 box-sizing: border-box 的尺寸调整outline-radius（该属性不存在），圆角必须用 border-radius
outline 自动出现，覆盖掉你手动设的 outline 可能导致焦点不可见边框圆角和透明边框要小心兼容性
border-radius 和 border-color: transparent 虽然基础，但在老版本 Safari（iOS 6–7）、Android Browser 4.3 及更早环境中行为异常。border: 1px solid transparent; 在某些安卓 WebView 中会被渲染成黑色边框；border-radius 单独设 border-top-left-radius 在 IE9 下不生效。
border-radius: 4px;，避免混用单边与简写导致覆盖border-image，它在 IE 中基本不可用/* 正确的基础边框示例 */
.card {
border: 2px solid #e0e0e0;
border-radius: 6px;
padding: 12px;
}
border 默认是 medium none currentColor）、继承行为（border-color 会继承 color），还有那些没报错却悄悄失效的写法。
