html5中边框实线必须用css的border-style:solid声明，不能依赖HTML旧属性；chrome与edge（Chromium内核）对此渲染一致，但需注意漏写solid、压缩丢失、父容器变换、覆盖样式及移动端兼容等实际影响因素。
html5 中设置边框实线用的是 CSS，不是 HTML 标签属性
HTML5 本身不提供设置边框的语法，border 是纯 CSS 控制的。常见误区是试图在
或
标签里加 border="1" 这类旧式属性——这在语义和规范上已不推荐，且无法精确控制「实线」样式（比如可能被渲染成虚线或双线，尤其在现代浏览器中）。
正确做法始终是用 CSS 的 border-style，并显式指定 solid：
div { border: 2px solid #333; }
这里 solid 才是实线的关键字，缺省值不是它，所以不能省略。
Chrome 和 Edge 对 border-style: solid 渲染完全一致
只要用标准写法，Chrome（基于 Chromium）和 Edge（新版也是 Chromium 内核）对 solid 的解析和绘制没有差异。它们共享同一套渲染引擎，不存在「设了 solid 却显示成 dotted」这类兼容性问题。
立即学习“前端免费学习笔记（深入）”；
但要注意这些实际影响显示的细节：
- 如果父容器用了
transform、backface-visibility: hidden 或开启了硬件加速，某些旧版 Edge（EdgeHTML）可能触发亚像素渲染异常，让细边框（如 1px solid）看起来模糊或断续——这不是 solid 本身的问题，而是抗锯齿策略差异
- 若 CSS 中只写了
border: 1px #000（漏掉 solid），部分浏览器会按历史行为 fallback 到 border-style: none，导致边框消失；Chrome 和 Edge 都遵循这个规则，所以「漏写 solid」反而会暴露问题
-
border-image 或 box-shadow 叠加时，视觉上可能掩盖实线效果，需检查是否被覆盖
移动端 safari 或旧版 IE 才真有实线兼容风险
如果你发现「Chrome 显示正常，但手机上看边框没了」，大概率不是 solid 不支持，而是：
- 用了
border-width: 0.5px —— Safari ios 支持该写法，但部分安卓 webview 不识别，回退为 0px
- 设置了
border-collapse: collapse 的表格，在 IE11 下对 solid 的单元格边框合并逻辑有偏差（比如相邻边框只显示一条）
- CSS 里写了
border: 1px solid transparent，再靠 outline 模拟边框——这种 hack 在 EdgeHTML 里 outline 渲染位置不稳定
这些都不是 Chrome/Edge 的区别，而是不同平台底层渲染路径的取舍。
调试边框是否真是实线，看 computed style 最可靠
别只信元素面板里写的 CSS 规则，要查「Computed」标签页里的 border-top-style 等字段，确认最终值确实是 solid。常见干扰项包括：
- 某个更高优先级的选择器设置了
border-style: hidden 或 border: none
- 继承自父级的
border-style 被重置，但子元素没显式声明
- 使用了 CSS 自定义属性（
--border-style），但未在 :root 或对应作用域中定义，导致计算值为 initial（即 none）
真实项目里，最常被忽略的是：开发时在 Chrome 里调好了，上线后因构建工具自动压缩 CSS，把 border: 1px solid #000 压成 border:1px #000，丢掉了 solid —— 这时 Edge 和 Chrome 一样不显示边框。