CSS border-collapse Property

The 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 table and inline-table elements. The border-collapse can be inherited which means table and 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.

Syntax

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;

Acceptable Values

separate

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.

collapse

This keyword requesting the use of the collapsed-border table rendering model.

Browser Support

The border-collapse property is supported in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top