- From: Karl Dubost via GitHub <noreply@w3.org>
- Date: Wed, 28 Jan 2026 14:31:45 +0000
- To: public-css-archive@w3.org
karlcow has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-tables-3] How table borders should be painted at the corner? (border-collapse: collapse) ==
Currently the painting at the corner of collapse borders differs in between Chrome/Safari and Firefox.
This is easily visible with larger borders.
<img width="3160" height="759" alt="Image" src="https://github.com/user-attachments/assets/0913ca32-29e5-4660-ac2f-e63bf713f8c9" />
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>
```
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13406 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 28 January 2026 14:31:46 UTC