border-radius 是控制边框连接处形状的属性，通过定义四个角的椭圆裁切半径实现圆角、椭圆角或截断效果；其生效受 overflow、transform、box-shadow、outline 及 table 的 border-collapse 等因素影响。
border-linejoin 是什么？根本不存在这个属性
CSS 里没有 border-linejoin 这个属性，这是常见拼写混淆。真正控制边框连接处形状的是 border-radius 和 border-collapse（表格）之外的另一个独立属性：border-image-slice 也不管这事——正确答案是：border-style 配合 border-width 起基础作用，但真正决定转角形状的，是 border-radius 和 border-collapse 的组合逻辑，以及更关键的：border-join？不，还是错的——其实是 border-style 的底层渲染规则 + border-radius 的覆盖行为。
真实起效的是：border-radius。它直接裁切边框交点，生成圆角、椭圆角甚至“切断”效果。
用 border-radius 控制边框连接处的形状
border-radius 不只是“让盒子变圆”，它本质是定义四个角的裁切椭圆半径，从而覆盖掉默认尖锐的边框连接点。只要设置了非零值，连接处就不再是直角拼接，而是被平滑过渡替代。
- 值为单个长度（如
8px）时：四个角等半径圆角，连接处呈标准圆弧 - 值为两个值（如
4px 12px）时：分别控制水平/垂直半径，连接处变成椭圆弧，适合斜向视觉平衡 - 值为四个值（如
0 8px 16px 4px）时：每个角独立控制，可制造不对称连接形态，比如左上角尖、右下角极圆 - 当某个角的半径 ≥ 对应边框宽度的一半时，该连接处会呈现“内凹”或“截断”感，尤其在粗边框（
border-width: 12px）下明显
注意：border-radius 对 border-style: dashed 或 dotted 的影响不稳定，某些浏览器会在转角处断开虚线，这不是 bug，是规范允许的渲染差异。
立即学习“前端免费学习笔记（深入）”；
为什么有时候加了 border-radius 还是尖角？
这不是 border-radius 失效，而是被其他样式压制或条件不满足：
- 父容器设置了
overflow: hidden，但子元素边框超出父盒——此时裁切发生在父级，子级border-radius可能被遮挡，看起来像没生效 - 元素使用了
transform: scale()或will-change: transform，部分浏览器（尤其是旧版 Safari）会绕过border-radius渲染逻辑 - 边框由
box-shadow模拟（如box-shadow: 0 0 0 2px #000），而box-shadow默认不响应border-radius，需额外加border-radius到自身，且阴影扩散值过大时仍会露尖 - 使用了
outline而非border：outline 永远不支持圆角，无论怎么设border-radius都无效
border-collapse 和 table 边框连接的特殊性
表格的边框连接逻辑和普通块级元素完全不同。border-collapse: collapse 下，相邻单元格的边框会“合并”，此时连接处形状由 border-radius 完全失效——W3C 明确规定：table 的 collapsed 边框不支持圆角。
- 若需要圆角表格边框，必须用
border-collapse: separate，并确保border-spacing: 0 - 即使如此，只有外层
table元素的border-radius生效，内部td/th的圆角仅影响自身，不会“融合”成统一转角 - 更稳妥的做法：给
table包一层div，对 div 设border-radius和overflow: hidden，再让 table 自身无圆角、撑满容器
复杂点在于：边框连接不是单一属性开关，而是 border-radius、元素盒模型、渲染上下文（是否在 transform 层）、以及是否处于表格 collapsed 模式共同作用的结果。最容易被忽略的是——你看到的“连接处”，可能根本不是 border 的连接，而是 box-shadow 或 outline 的视觉叠加。
