Table thead background overflow with border radius on Firefox

Question

I have a border radius on my th element. Also, i set a background for specific columns in my table.

 <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup

on Chrome it's working good. issue on firefox, it ignores my border-radius and there is overflow of the background color. Note that i can't set the background for each tr individually because it's a gradient color and it'll repeat itself. Here is a short fiddle: https://jsfiddle.net/n645szk7/

Render it once on chrome and again on Firefox to see the differences. Thanks.

Answer 1

Test Both attributes

• -moz-outline-radius: 25px;
• -moz-border-radius: 25px;