CSS border-spacing Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 27 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-spacing property in CSS is used to set the spacing between the borders of adjacent table cells.

This property is particularly useful when you want to control the amount of space between the cells of a table, giving you more control over the table's layout and appearance.

💡 Syntax

The syntax for the border-spacing property is as follows:

Syntax

Copied

table {
  border-spacing: length [length];
}

The first length value sets the horizontal spacing between the cells.
The optional second length value sets the vertical spacing. If only one value is provided, it applies to both horizontal and vertical spacing.

🎛️ Default Value

The default value of the border-spacing property is 0, meaning there is no space between the borders of adjacent cells.

🏠 Property Values

Value	Description
length	A positive value (e.g., 10px, 1em, etc.) that defines the space between adjacent table cells. It can be specified in any CSS length unit.
initial	Sets the property to its default value, which is 0.
inherit	Inherits the `border-spacing` value from the parent element.

📄 Example

In this example, we'll apply border-spacing to a table to add spacing between the cells.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-spacing Example</title>
  <style>
    table {
      border-spacing: 10px 15px;
      border: 1px solid black;
    }
    td {
      border: 1px solid gray;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Table with Custom Border Spacing</h1>
  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>
</body>
</html>

In this example, the border-spacing property is set to 10px horizontally and 15px vertically, creating noticeable space between the table cells.

🖥️ Browser Compatibility

The border-spacing property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, it's a good practice to test the appearance of your table in different browsers to ensure consistent rendering.

🎉 Conclusion

The border-spacing property is a valuable tool for web developers looking to fine-tune the appearance of tables. By adjusting the space between cells, you can create a more visually appealing layout and better align the table with your overall design. Experiment with different spacing values to see how they affect the look and feel of your tables.