CSS border-radius属性在Firefox浏览器中无法正常生效的问题求助

我给网页中的table元素设置了CSS的border-radius属性，在Chrome、Opera和Edge浏览器中都能正常显示圆角效果，但在Firefox里出现了边角异常的问题（Firefox中边角有直角凸起，Chrome等浏览器则是正常的圆角）。我的table元素CSS代码如下：

#projectList {
    position: relative;
    top: 5px;
    border-radius: 25px 25px 25px 25px;
    overflow: hidden;
    border-collapse: collapse;
    overflow: hidden;
    border-style:solid;
    background-color:transparent;
}

元素结构包含thead、tbody等子元素。

解决办法 #

• 方案1：替换border-collapse属性
  Firefox对border-collapse: collapse和border-radius的组合支持存在缺陷，换成border-collapse: separate后手动调整单元格边框，既能保留圆角又能消除间隙：

#projectList {
    position: relative;
    top: 5px;
    border-radius: 25px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: solid 1px #你的边框颜色;
    background-color: transparent;
}
/* 给首尾单元格设置对应圆角 */
#projectList thead tr th:first-child {
    border-top-left-radius: 25px;
}
#projectList thead tr th:last-child {
    border-top-right-radius: 25px;
}
#projectList tbody tr:last-child td:first-child {
    border-bottom-left-radius: 25px;
}
#projectList tbody tr:last-child td:last-child {
    border-bottom-right-radius: 25px;
}
/* 处理单元格边框衔接 */
#projectList th, #projectList td {
    border-right: solid 1px #你的边框颜色;
    border-bottom: solid 1px #你的边框颜色;
}
#projectList th:last-child, #projectList td:last-child {
    border-right: none;
}
#projectList tbody tr:last-child td {
    border-bottom: none;
}

• 方案2：用容器包裹Table
  给table套一个div容器，把圆角和溢出隐藏的逻辑放到容器上，table自身保持原有布局：

<div class="table-wrap">
    <table id="projectList">
        <!-- 表格内容 -->
    </table>
</div>

.table-wrap {
    border-radius: 25px;
    overflow: hidden;
    display: inline-block;
    border: solid 1px #你的边框颜色;
}
#projectList {
    position: relative;
    top: 5px;
    border-collapse: collapse;
    background-color: transparent;
    border: none;
}

• 方案3：Firefox专属临时修复
  用Firefox的私有规则强化溢出隐藏，快速缓解问题：

#projectList {
    position: relative;
    top: 5px;
    border-radius: 25px;
    overflow: hidden;
    border-collapse: collapse;
    border-style:solid;
    background-color:transparent;
    -moz-border-radius: 25px;
    border: solid 1px #你的边框颜色;
}
#projectList tbody {
    overflow: hidden;
}

推荐优先用方案1或2，兼容性更稳定，方案3适合快速临时调整。

内容的提问来源于stack exchange，提问作者G. ÖZEL