The border-collapse property allows you to define a way in which a border should be displayed around a table cell. To display the border of your table in different styles, you need to set the appropriate values of the border-collapse property.
Here is a table showing the available values of the border-collapse property:
| Value | Description |
|---|---|
collapse |
seta a common border to all the cells of a table. |
separate |
sets a separate border for each cell of a table. |
inherit |
Inherits the value of the border-collapse property from the parent element. |
Now let's see the syntax for using the border-collapse CSS property.
Syntax for border-collapse property:
Following is the syntax for using the border-collapse property:
border-collapse: VALUE;
The VALUES can have values as shown in the table above.
Time for an Example!
Now let's take an example where we will create some HTML tables and then use the border-collapse property to create border around the cells of the table.
When the border-collapse property has value collapse then it sets a common border to all cells of a table.
Browser Support for border-collapse property:
Following browsers support this attribute:
-
Google Chrome 9.0
-
Internet Explorer 11.0
-
Firefox
-
Opera
-
Safari
