Webzstore
The CSS 'border-spacing' property specifies the distance between the borders of adjacent table cells. Unlike table elements' cell padding attribute (now considered outdated HTML), 'border-spacing' applies only to CSS-styled tables with border-collapse set to separate. This property allows designers to control the spacing between table cells, enhancing table data's visual layout and readability.
CSS 'border-spacing' Property Examples
See the Pen CSS 'border-spacing' Property by Webzstore (@webzstore) on CodePen.
The 'border-spacing' property is essential for controlling the spacing between cells in CSS-styled tables, contributing to tabular data's aesthetic and functional presentation on web pages.
Browser Support For 'border-spacing' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 4 | Jun 2000 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-spacing for the full compatibility details, including mobile browsers.
CSS Syntax of the 'border-spacing' Property
border-spacing: length | initial | inherit;- A single length value applies to both horizontal and vertical spacing.
- Two length values specify the horizontal (first value) and vertical (second value) spacing, respectively.
Usage of the 'border-spacing' Property
Use 'border-spacing' to adjust the space between table cell borders. This property is particularly useful for creating more visually appealing tables by providing adequate space between cells, thus improving legibility and overall design. It can be specified using one or two values, where the first value defines the horizontal spacing, and the second value (if present) represents the vertical spacing.
Property Values of the 'border-spacing' Property
- Length: Specifies the spacing between borders in length units (e.g., px, em).
- Initial: Resets the 'border-spacing' to its default value.
- Inherit: Inherits the 'border-spacing' from the parent element (useful for nested tables).
