I can’t smooth out the rounded bottom corners of an HTML table with CSS

by

Summary

The issue involves rendering artifacts (“glitched” or “aliased” corners) when applying rounded corners to an HTML table’s bottom edges. The user attempted to achieve this via CSS overrides with the Firefox Stylus extension but encountered unsmooth visual results at the bottom-left and bottom-right corners. This breakdown analyzes the root cause, implications, and solution.

Root Cause

The core issue stems from interference between border-collapse and border-radius, combined with table-rendering quirks. Key factors:

  • Collapsed borders override cell-level corner rounding
  • Browser rendering engines struggle to blend rounded corners at intersecting cell borders
  • <table> semantics force inconsistent corner rendering
    Additionally, insufficient specificity for targeting bottom-row cells amplified the problem.

Why This Happens in Real Systems

Real-world applications often encounter this because:

  • Legacy HTML table structures remain prevalent despite CSS advancements
  • Developers reuse border-collapse: collapse for pixel-perfect borders
  • Off-the-shelf CSS frameworks rarely handle edge cases like rounded corners on tables
    workswith border-collapse: collapse
  • Designers increasingly request modern UI touches (e.g., rounded corners) for legacy components

Real-World Impact

The visual artifacts degrade UX and quality perception:

  • Brand inconsistency – Corners appear “broken” or unpolished
  • Accessibility concerns – Distracting visual noise for users with cognitive disabilities
  • Maintenance debt – Engineers waste hours debugging rendering quirks instead of feature work

Example or Code

/* BROKEN: Causes jagged bottom corners */
.table-wrapper table {
  border-collapse: collapse;
  border-radius: 8px;
}

/* FIXED: Apply separate rendering */
.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

How Senior Engineers Fix It

Senior engineers address this holistically:

  1. Avoid border-collapse: collapse – UseSingle adjacent cell borders
  2. Wrap tables in containers – Apply overflow: hidden and outer border-radius to clip jagged edges
  3. Precision targeting – Explicitly round corners of first/last cells in the bottom row
  4. Leverage CSS cascade – Minimize global table styles; scope overrides to specific wrappers
  5. Validate rendering – Cross-browser test with pseudo-element debugging (::before/::after)

Critical insight: Decouple rendering responsibilities – Let the container handle clipping while cells manage internal styling.