border-collapse property is used to specify the border model of a table. This property determines whether a table’s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders and the space between the borders of adjacent cells can be controlled using the
border-spacing property. In the collapsed model, adjacent table cells share borders. In this case, the cells at the edges of the table share their borders with the borders of the table itself.
The initial value of border-collapse property is
separate. You can apply it to
inline-table elements. The
border-collapse can be inherited which means
inline-table elements that are children of a given element will also have the same value for
border-collapse property as the parent element. This property is not animatable. The transition between different values will be sudden.
This is the formal syntax for using
border-collapse property —
border-collapse: collapse | separate
Here are some examples of using this property —
border-collapse: collapse; border-collapse: separate; border-collapse: inherit;
This value use the separated borders model for the element. The table and its cells will all have distinct borders. This is the default value.
This keyword requesting the use of the collapsed-border table rendering model.
border-collapse property is supported in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.