该用 border 而非 outline；border 需同时指定 width、style、color 三参数，可用方向性属性如 border-top 单独设置某边，border-radius 使边框自身变圆，深色模式下需配合 prefers-color-scheme 适配颜色。
边框用 border 还是 outline？先分清用途
绝大多数人想加“围住元素的线”，该用 border；outline 是用于聚焦提示（比如点击输入框时的虚线），不占布局空间，也不能单独设某一边。别用 outline 伪装边框，否则可能破坏盒模型或被屏幕阅读器误读。
border 的三个必要参数缺一不可
写 border: 1px solid #ccc; 才生效，少一个就无效。这三个部分必须同时存在：
-
width：比如1px、thin、medium -
style：必须是solid、dashed、dotted、none等之一；none会彻底移除边框（比transparent更可靠） -
color：可为颜色名、十六进制（如#333）、RGB（如rgb(51,51,51)）或transparent
常见错误：border: 1px #ccc; 缺少 style → 不渲染；border: solid #ccc; 缺少宽度 → 默认为 medium，但不同浏览器解析不一致，建议始终显式写全。
只给某一边加边框？用方向性属性更安全
直接写 border-top、border-right 等，比用 border 全局重置再覆盖更可控，尤其避免意外清除其他边：
立即学习“前端免费学习笔记（深入）”；
div { border-top: 2px dashed #e0e0e0; border-bottom: 1px solid #ddd; }注意：border-left-width 这类子属性只能设宽度，不能设样式或颜色；要单独控制某一边的全部样式，必须用 border-left 这种复合属性。
圆角 + 边框组合时，border-radius 优先级高于 border
border-radius 会让边框本身变圆，不是“盖在边框上的遮罩”。但要注意两个坑：
- 如果边框有渐变色（用
border-image），border-radius可能导致边缘锯齿或裁切异常 - 当父容器设了
overflow: hidden，而子元素边框带圆角且超出父容器尺寸，圆角部分会被裁掉 —— 这不是 bug，是预期行为
调试时可临时加 background: yellow; 看内容区域是否被意外挤压，因为 border 默认计入盒模型（除非用了 box-sizing: border-box）。
真正容易被忽略的是：边框颜色在深色模式下可能完全看不见。如果项目需适配系统主题，别只写 #000 或 white，改用 color-scheme: light dark; 配合 css @media (prefers-color-scheme: dark) 做条件覆盖。