border会撑开布局，outline不会；border支持圆角和分边控制，outline不支持且始终为矩形；outline默认用于焦点提示，但移除时需兼顾可访问性。
border 会撑开布局，outline 不会
这是最根本的区别：加 border 后，元素实际占用空间变大；加 outline 只是“画一层光晕”，不改变尺寸，也不推挤周围元素。
- 当设置
box-sizing: content-box（默认）时，border: 3px solid #000会让元素总宽高额外增加 6px（上下/左右各 3px） -
outline: 3px solid #000完全不影响width/height，甚至可能覆盖相邻元素——因为它绘制在 border 外侧，且不参与文档流 - 调试时想临时标出某个元素？用
outline更安全，不会导致页面“跳动”或错位
border 支持圆角，outline 死活都是方的
哪怕你给元素设了 border-radius: 50% 变成圆形头像，outline 依然死守矩形区域，围着原始盒模型画框——结果就是“圆脸+方光晕”，视觉割裂。
- 需要圆形外边框？必须用
border或box-shadow（后者更灵活，还能控制模糊和偏移） -
outline不支持border-top-left-radius等任何圆角属性，连outline-radius这个 CSS 属性都不存在 - 若真要用
outline做焦点提示，又想避开圆角冲突，可配合outline-offset: 2px微调距离，减少遮挡感
border 能分边控制，outline 必须四边统一
你要上边实线、右边虚线、下边双线、左边点状？border 完全支持；outline 只能整体设置，没有 outline-top 这种东西。
-
border-top: 2px dashed red✅ 可单独控制 -
outline-top: 2px dashed red❌ 语法无效，浏览器直接忽略 - 想实现“仅顶部高亮”的效果？别硬套
outline，改用border-top+border-bottom: none，或用box-shadow: 0 -2px 0 0 #000
outline 默认随 focus 自动出现，border 不会
浏览器对表单控件（如 、）有内置行为：获得焦点时自动加上蓝色 outline。这不是你写的 CSS，是 UA stylesheet 的默认规则。
立即学习“前端免费学习笔记（深入）”；
- 移除它？
outline: none确实能干掉，但会破坏键盘用户的可访问性 - 正确做法是：用
:focus-visible替代:focus，只在真正需要时显示自定义轮廓（比如键盘操作才触发） - 或者换用
box-shadow: 0 0 0 2px #007bff模拟 outline 效果——它支持圆角、不撑布局、还能自由定位
真正难的不是记住区别，而是每次写样式前问一句：这个线是结构的一部分，还是纯视觉提示？选错就容易引发布局偏移、焦点不可见、圆角失效这些看似奇怪实则必然的问题。
