必须同时设置 border-width、border-style 和 border-color 才能显示边框；仅设 border-color 无效，推荐用 border 简写或 class 统一管理。
用 border-color 直接改边框颜色
HTML 元素的边框颜色不是靠 HTML 属性控制的，必须用 CSS。最直接的方式就是设置 border-color，但它得和 border-width、border-style 一起用才有可见效果——三者缺一不可，否则边框压根不显示。
-
border-style至少得是solid、dashed或dotted，none或hidden会让边框消失 - 如果只写
border-color: red，但没设border-style，页面上完全看不到边框 - 可以合并写：
border: 2px solid #333，这样三个属性一次配齐 - 支持分别设置四边：
border-top-color: blue、border-left-color: transparent
内联样式里改边框颜色的写法
在 <div style="..."> 这种内联写法里，别漏掉单位和样式，不然等于白写。常见错误是只写颜色，或者用了无效值。
<ul><li>✅ 正确：<code><div style="border: 1px solid #007bff">
<li>❌ 错误：<code><div style="border-color: #007bff">（没宽度、没样式，边框不可见）
<li>❌ 错误：<code><div style="border: solid #007bff">（缺宽度，部分浏览器会忽略）
<li>透明边框可用 <code>transparent，不是空字符串或 none
用 class 控制边框颜色更可靠
内联样式容易重复、难维护，尤其要批量改色时。用 class + 外部 CSS 是更稳的做法，还能避免 HTML 里混太多样式逻辑。
- HTML 中写：
<div class="border-red"> <li>CSS 中定义：<code>.border-red { border: 2px solid #e74c3c; } - 想让不同边颜色不同？用
border-top-color等单独属性，比重写整个border更精准 - 注意：如果其他 CSS 规则优先级更高（比如 ID 选择器或
!important），你的 class 可能不生效 - 元素本身没有内容或高度/宽度为 0，导致边框区域不可见（加
padding或min-height测试） - 父容器设置了
overflow: hidden，把边框裁掉了 - 用了
border-collapse: collapse的表格，border-color要写在table或td上，而不是tr - 浏览器默认样式干扰，比如
button在某些浏览器里有内置边框，需用appearance: none重置
border 颜色不生效的几个典型原因
不是代码写错了，而是被别的规则覆盖、或基础条件没满足。遇到“写了没反应”，先盯这几个点。
立即学习“前端免费学习笔记（深入）”；
border-style 缺失、优先级被盖住，或者元素根本没有渲染空间。
