为何圆角分割线在Firefox中显示异常，在Chrome中正常？

我尝试制作一个圆角分割线，在Firefox中显示效果很差，以下是示例代码：

<html>
<style>
hr.rounded {
  border-top: 15px solid #bbb;
  border-radius: 8px;
  width: 50%;
  margin: 0 auto;
}
</style>
<body>
<hr class="rounded">
</body>
</html>

奇怪的是该分割线在Chrome中显示完全正常，想请教原因，谢谢。

问题根源 #

Chrome和Firefox对<hr>元素的默认样式处理逻辑存在差异：

• Chrome会自动将<hr>未设置的边框（border-bottom/left/right）重置为none，只保留你定义的border-top，此时border-radius能正常作用在单一的上边框上，呈现出预期的圆角效果。
• Firefox则保留了<hr>原生的border-style: inset以及其他三边的透明边框，这些隐形边框会破坏border-radius的渲染逻辑，导致圆角显示异常（通常会出现边角突兀、线条变形的情况）。

修复代码 #

只需要显式重置所有无关边框为none，确保样式在各浏览器中一致：

hr.rounded {
  border: none; /* 清除所有默认边框 */
  border-top: 15px solid #bbb;
  border-radius: 8px;
  width: 50%;
  margin: 0 auto;
}

这样修改后，Firefox和Chrome的显示效果就会完全一致了。

内容的提问来源于stack exchange，提问作者rrutouowrpeie