CSS Border Collapse

« Previous Tutorial Next Tutorial »

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.

CSS border-collapse Property Values

The following table shows the possible values of the border-collapse property :

Value Description
collapse Sets 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

CSS border-collapse Property Syntax

The following syntax shows an example of applying the border-collapse property in a table :

table { border-collapse:separate; }

In the preceding syntax, the value of the border-collapse property is set to separate. This allows you to set different borders for all the cells of a table.

CSS border-collapse Property Example

Here is an example, shows how to collapse the border of the table using CSS border-collapse property:

<!DOCTYPE html>
	<title>CSS Border Collapse Example</title>
		table, th, td { border:2px solid red; }
		table { border-collapse:collapse; }

		<td>CSS Border Collapse Tutorial</td>
		<td>CSS Border Collapse Example</td>
		<td>CSS border-collapse Property Tutorial</td>
		<td>CSS border-collapse Property Example</td>


Here is the sample output of the above CSS border-collapse property example code:

collapse table border css

« Previous Tutorial Next Tutorial »


Quick Links
Signup - Login - Give Online Test