Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-spacing

border-spacing

Specifies the spacing between cells when the 'border-collapse' property is set to 'separate'.

When one value is specified, it applies to all four sides (top, right, bottom, left).

When two values are specified, the first value sets the horizontal spacing (left and right) and the second sets the vertical spacing (top and bottom).

Sample Code

style.css

/* Uniform 10px spacing on all sides */
table.test { border-spacing: 10px;}

/* Horizontal 20px, vertical 10px spacing */
table.test1 { border-spacing: 20px 10px;}

/* No spacing (while keeping border-collapse: separate) */
table.test2 { border-spacing: 0;}

/* Practical example: padded cells with spacing */
table.padded {
	border-collapse: separate;
	border-spacing: 6px 4px;
}
table.padded td {
	background-color: #f0f4ff;
	padding: 8px;
}

/* Calendar-style layout with even gaps */
table.calendar {
	border-collapse: separate;
	border-spacing: 4px;
}
table.calendar td {
	width: 40px;
	height: 40px;
	text-align: center;
	background-color: #eee;
}

Available Values

Value	Description
Number	Specifies the spacing as a number. You can use units such as 'px' or 'em', but '%' and negative values are not allowed. The initial value is '0'.

Browser Preview

The table element in the sample below has 'border-collapse: separate' and 'border: solid 1px #f00', and each td element has 'border: solid 1px #00f' and 'border: solid 1px #0f0' respectively.

<table style=" border-spacing: 10px; border-collapse: separate; border: solid 1px #f00; margin: 0 auto;">
	<tr><td style="border: solid 1px #00f;">This is a td element.</td><td style="border: solid 1px #0f0;">This is a td element.</td></tr>
	<tr><td style="border: solid 1px #0f0;">This is a td element.</td><td style="border: solid 1px #00f;">This is a td element.</td></tr>
</table>

<table style=" border-spacing: 20px 10px; border-collapse: separate; border: solid 1px #f00; margin: 0 auto;">
	<tr><td style="border: solid 1px #00f;">This is a td element.</td><td style="border: solid 1px #0f0;">This is a td element.</td></tr>
	<tr><td style="border: solid 1px #0f0;">This is a td element.</td><td style="border: solid 1px #00f;">This is a td element.</td></tr>
</table>