直接用 border 属性设实线边框最稳妥
HTML5 本身不提供边框设置能力，所有样式必须靠 CSS。想设实线边框，border 是唯一通用解法，别试图用 frame、rules 这类过时的 table 属性——它们只对 <table> 有限生效，且无法控制线型为“实线”以外的样式。
<p>标准写法是：<code>border: 1px solid #000;。其中 solid 明确指定实线，1px 是宽度（可调），#000 是颜色（支持命名色、hex、rgb、hsl 等）。
常见误操作：
- 只写
border: 1px #000;—— 缺少线型，浏览器会忽略整条声明 - 写成
border-style: solid;却没配border-width和border-color—— 宽度默认为 0，边框不可见 - 在内联样式里漏掉分号，比如
style="border: 1px solid red"少了结尾分号，可能影响后续样式解析
border-color 没生效？先查层叠顺序和继承干扰
颜色不对，大概率不是 border-color 写错了，而是被更高优先级的规则覆盖，或父元素设置了 border-color 导致子元素继承（虽然 border-color 默认不继承，但某些重置库如 normalize.css 会显式设 inherit）。
立即学习“前端免费学习笔记（深入）”；
排查步骤：
- 打开浏览器开发者工具（F12），选中元素，在
Computed面板看最终生效的border-color值，点旁边箭头展开来源 - 检查是否有更具体的 CSS 选择器（如
.card .item覆盖了.item） - 确认是否用了
!important的旧规则，它会压制新写的颜色声明 - 如果元素是表单控件（如
<input>、<button></button>），部分浏览器会强制应用系统主题色，需加appearance: none;并重置所有 border 相关属性
用 outline 代替 border？千万别
有人发现 outline 也能画线，还不会占布局空间，就拿来当边框用——这是危险做法。因为 outline 不支持 border-radius 圆角、不能分别设置四边、不响应 box-sizing、且焦点状态下浏览器会自动添加（影响可访问性）。
更关键的是：outline 的颜色在高对比度模式下会被系统强制替换，导致你设的 #ff0000 在 Windows 高对比主题下变成白色或黑色，完全失控。实线边框必须用 border，这是唯一可控、可预测、符合语义的方案。
移动端或 Retina 屏边框发虚？试试 border-width 微调
在高清屏上，1px 边框常被渲染成 0.5 物理像素，看起来模糊或断续。这不是颜色问题，是设备像素比（dpr）导致的渲染精度限制。
解决方法不是换颜色，而是调整宽度单位：
- 用
transform: scaleY(0.5)缩放伪元素模拟 0.5px 边框（兼容性好） - 用
border-width: 0.5px;（仅 Safari 支持，Chrome/Firefox 会向上取整为 1px） - 更可靠的是媒体查询 +
device-pixel-ratio：例如@media (-webkit-min-device-pixel-ratio: 2) { .el { border-width: 0.5px; } }，但要注意 fallback
这类问题容易被当成“颜色不准”，其实只是视觉精度差异。真要验证，把页面缩放到 100% 并截图放大看像素排列，比肉眼判断靠谱得多。
