🧱 CSS border-collapse: Controlling Table Borders for Seamless Layouts

When styling HTML tables, one common challenge is managing how the borders between cells appear. Should each cell keep its own border, or should adjacent borders merge into one? The CSS border-collapse property gives you control over this behavior, making your tables look cleaner and more professional.

---

🧾 What is border-collapse?

The border-collapse property controls whether the borders of adjacent table cells are separated or collapsed into a single border. It affects the way borders around <table>, <tr>, and <td> elements render.

---

🧬 Syntax

table {
  border-collapse: separate | collapse | inherit;
}

---

🔍 Property Values

Value	Description
separate	Default. Borders around each cell are separated; cells have spacing.
collapse	Adjacent borders collapse into a single border, removing space between cells.
inherit	The element inherits this property from its parent.

---

🎯 Visual Examples

1. Separate Borders (default)

table {
  border-collapse: separate;
  border-spacing: 10px; /* controls space between cells */
  border: 2px solid black;
}

• Each cell maintains its own border.
• There is space between cells controlled by border-spacing.

---

2. Collapsed Borders

table {
  border-collapse: collapse;
  border: 2px solid black;
}

• Borders between cells merge into one line.
• Table looks more compact and unified.

---

🛠️ When to Use Which?

Use Case	Recommended Value
Tables needing clear separation	separate
Compact tables with unified borders	collapse
Inheriting styles from parent element	inherit

---

🔧 Additional Tips

• When using border-collapse: separate, use the border-spacing property to control the gaps between cells.
• With collapse, adjacent borders merge and border widths from adjacent cells follow specific rules for rendering thickness.
• Combining border-collapse: collapse with border-style and border-color on table cells can create crisp, clean tables.
• Beware that padding and background colors behave differently between the two modes.

---

✅ Browser Support

border-collapse is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and IE9+.

---

🔚 Conclusion

The CSS border-collapse property is essential for tailoring how table borders are displayed. Choosing between separate and collapse impacts the spacing and look of your tables drastically. Mastering this property helps you build tables that fit your design vision perfectly — whether you want airy spacing or tight, clean lines.

---