这个问题是来自超级用户的migrated，因为它可以在Stack Overflow上回答。Migrated 9天前.
我只是想在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>下面是一个jsfiddle：https://jsfiddle.net/mnfq9bu2/
更奇怪的是，它在Chrome中看起来完全正常。有人知道发生什么事了吗谢谢.
1条答案
按热度按时间mepcadol1#
Firefox似乎做了正确的事情-只圆顶部边框。
为了在不同浏览器之间获得一致的外观，你可以完全放弃使用边框，而是让hr的主体具有15 px的高度并删除默认边框。
注意：建议使用此方法，而不是尝试其他方法，如在顶部和底部之间分割边界，因为系统可能难以正确显示部分CSS像素。