最可靠方式是用 CSS border 属性；HTML5 无边框标签，需元素配合 CSS；border 必须写全宽度、样式、颜色，如 border: 1px solid #ccc；outline 非边框，不可替代；border-radius 和 transparent 边框需注意旧版兼容性。
直接用 border CSS 属性最可靠
HTML5 本身没有“边框”标签或属性，所有边框控制都交给 CSS。想给元素加基础边框，border 是唯一通用且兼容性最好的方式。别被“HTML5 设置边框”这种说法误导——它本质是 HTML 元素 + CSS 样式配合的结果。
常见错误是试图用
-
border是简写属性，推荐一次性写全：宽度、样式、颜色，例如border: 1px solid #ccc; - 只设样式（如
border: solid;）会导致边框不可见——因为默认宽度为0px - 若只要某一边有边框，用
border-top、border-left等细分属性更精准 - 内联样式（
style="border: ..."）可快速验证，但正式项目应写进
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;，避免混用单边与简写导致覆盖 - 透明边框慎用于按钮或交互区域——视觉上“没边框”，但实际仍占空间，可能影响点击热区判断
- 需要兼容 IE9+？避开
border-image，它在 IE 中基本不可用
/* 正确的基础边框示例 */
.card {
border: 2px solid #e0e0e0;
border-radius: 6px;
padding: 12px;
}
/ 错误：只写样式，无宽度 → 无边框显示 /
.bad { border: dashed; }
/ 错误：用 outline 模拟边框 /
.wrong { outline: 2px solid blue; }
边框看着简单，但真正卡住人的往往是默认值（比如 border 默认是 medium none currentColor）、继承行为（border-color 会继承 color），还有那些没报错却悄悄失效的写法。