Repository navigation
[css-tables-3] How table borders should be painted at the corner? (border-collapse: collapse) #13406
Description
Currently the painting at the corner of collapse borders differs in between Chrome/Safari and Firefox.
This is easily visible with larger borders.
As you can see, chrome and Safari adds the opacity on top of each other, while Firefox doesn't have this rendering because the corners are painted in diagonal (like a real wood painting frame assemblage)
But which is correct?
I didn't find anything in the specification explaining how it should be done.
https://drafts.csswg.org/css-tables-3/#conflict-resolution-for-collapsed-borders
https://codepen.io/webcompat/pen/XJKVezR
<style>
td {
width: 50px;
height: 50px
}
table {
border-collapse: collapse;
margin: 10px
}
</style>
<table>
<tbody>
<tr>
<td style="
border-left: 20px solid rgba(0, 127, 0, 0.5);
border-bottom: 20px solid rgba(0, 127, 0, 0.5);"></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="
border-left: 20px solid rgba(0, 127, 0, 0.5);
border-bottom: 20px solid rgba(127, 0, 0, 0.5);"></td>
</tr>
</tbody>
</table>
Activity
karlcow commentedon Jan 28, 2026
If painting on top of each other, there will be also the issue of the painting order which will matter. Which border will win over the other side.
keithamus commentedon Jan 29, 2026
Right. I'm inclined to say Firefox's "clean mitres" is right here because this matches how borders generally work in non-table painting.
(FWIW Firefox's draw code for borders, Chrome's code for collapsed borders, Webkit's code for collapsed borders).
Of note WebKit has a comment:
I don't know the history here, but I'd wager Chrome's lineage to WebKit is why the two behave the same.
karlcow commentedon Jan 29, 2026
This is really old code, very old.
https://searchfox.org/wubkat/rev/9e89c25c83c75dd49f1310ba218714f878b0e0fb/WebCore/khtml/rendering/render_table.cpp#2181-2183
It was added in October 2003 by Dave Hyatt.
https://searchfox.org/wubkat/commit/9e89c25c83c75dd49f1310ba218714f878b0e0fb
Loirooriol commentedon Jan 29, 2026
Servo matches Firefox in this case (but in general it's a bit broken)
https://github.com/servo/servo/blob/2c770c162cc866c3a6b819e137bd8b5ffd582c78/components/layout/display_list/mod.rs#L1421