How do the borders of the table merge after setting border-collapse:collapse?

When I encountered a border that needed to be rounded, I found that after setting border-collapse:collapse, border-radius:5px did not work. I checked variously and found that this is CSS itself exists, and the two cannot be mixed together. So other methods were used to achieve rounded corners of the table.
But now I really want to know how the border of table and the borders of td and th are merged into one border?
Similar to the intersection between the upper left corner of the table and the first th, after the two borders are merged, will the border of the table or the border of th be retained? If it is the border of th that is retained, then why does setting border-radius on the upper left corner of the first th still have no effect?

laxative-v-, it happened that last Friday when sharing in the group, the priority of border-collapse was mentioned. The w3c section on table does have instructions for border-collapse: Collapse conflict handling.

There are two detailed examples in the document, which are very intuitive.

Here I am summarizing: (premise border-collapse: collapse)
1. border-style = [hidden|none]
hidden has the highest priority , when two borders are aggregated, as long as either one is set to hidden, the final result is that no border will be displayed; none has the lowest priority, as long as either one is set to none, the other will be used directly. for the result.

Normally, border-style: hidden and border-style: none do not display the border. There is a difference when border-collapse: collapse.

2. border-widthIn case of inconsistency, the larger border-width will prevail
3. border-style≠[hidden|none] and border- When the width is the same, the order of priority is: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset'.
4. When the border When the color is just different: according to the DOM hierarchical structure, the border style of the child element is better than the border style of the parent element. [cell > row > rowgroup > table]; If the hierarchical structure is a sibling relationship, take table is ltr as an example, the left side and the top side take precedence.

However, what is particularly interesting is that the specification does not specify the collapse logic of the corner, so the performance is different under Chrome and Firefox. .
Can be opened under chrome and firefox respectively: BQEMea
The picture below is the brother td, only the color is inconsistent, then the left is chrome, the right is firefox

The above is the detailed content of How do the borders of the table merge after setting border-collapse:collapse?. For more information, please follow other related articles on the PHP Chinese website!