/

HTML / CSS / JavaScript Tutorial

CSS Property: border-spacing

[this page | pdf | back links]

The CSS (CSS2) border-spacing property sets the distance between borders of adjacent cells (if the border-collapse property is separate  (which is its default).

 

Valid property values (other than inherit and initial) are:

 

Value

Description

length1 length2

Distance between borders of adjacent cells in CSS lengths. Must be non-negative. If one value supplied then both horizontal and vertical spacing. If two supplied then first relates to horizontal spacing and second to vertical spacing

medium

(default value). Medium width

thick

Thick width

thin

Thin width

 

Default Value:

0

JavaScript syntax:

e.g. object.style.borderSpacing="4px"

Inherited:

No

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table,td {border: thin solid red}
table.x1 {border-collapse: separate; border-spacing: 10px;}
</style>
<link rel="stylesheet" type="text/css" href="Content\ExampleStyles.css">
</head>
<body>
<table>
  <tr><td>1. Element with default property</td></tr>
  <tr><td>&nbsp;</td></tr>
</table>
<br>
<table class="x1">
  <tr><td>2. Element set using in-file HTML style</td></tr>
  <tr><td>&nbsp;</td></tr>
</table>
<br>
<table id="x2">
  <tr><td>3. Element set using JavaScript</td></tr>
  <tr><td>&nbsp;</td></tr>
</table>

<script>
document.getElementById("x2").style.borderCollapse = "separate";
document.getElementById("x2").style.borderSpacing = "10px";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBorderSpacing() {
  var x = document.createElement("DIV"); x.style.borderSpacing = "10px"; return (window.getComputedStyle(x, null).borderSpacing == "10px");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile