v149 · CSS · Migration Guide

Migration Guide

Most sites are unaffected by this change. Sites that relied on the implicit gray border default while setting a custom color on tables or table cells may see borders change from gray to the text color. This page explains what changed and how to fix it if needed.

Short summary: If your tables use border: 1px solid (without an explicit border-color) and you set a custom color, your borders now match that color instead of being gray. Add border-color: gray to restore the previous appearance.

who is affected

Unaffected scenarios

  • ✓ Tables with explicit border-color
  • ✓ Tables with no border set at all
  • ✓ Tables using border-collapse: collapse only
  • ✓ Tables using the default color (black/dark)
  • ✓ Tables inside dark-mode elements that already had gray text

Potentially affected

  • ✗ Tables with border: 1px solid + custom non-gray color
  • ✗ Styled components where table color differs from gray
  • ✗ Dark-mode overrides where table text is white/light

affected patterns and fixes

Pattern Before Chrome 149 Chrome 149+ Fix
table { color: blue; border: 1px solid; } gray borders (UA rule) blue borders (inherits) Add border-color: gray if gray was intended
table { color: white; border: 1px solid; } (dark mode) gray borders white borders — may be invisible! Add explicit border-color
table { border: 1px solid; } (default color) gray borders dark borders (matches text) Usually fine — dark text + dark border is fine
table { border: 1px solid gray; } gray borders gray borders No change — explicit overrides unaffected

how to audit your tables

// Audit: find tables that may be affected
document.querySelectorAll('table').forEach(table => {
  const cs = getComputedStyle(table);
  // Look for tables with border set but no explicit border-color
  const hasNonGrayColor = cs.color !== 'rgb(128, 128, 128)';
  const hasBorder = cs.borderTopWidth !== '0px';
  const hasExplicitBorderColor = table.style.borderColor !== '';

  if (hasBorder && hasNonGrayColor && !hasExplicitBorderColor) {
    console.warn('Table may be affected by Chrome 149 UA change:', table);
    console.log('  color:', cs.color);
    console.log('  computed border-color:', cs.borderTopColor);
  }
});

/* CSS fix patterns: */

/* Option 1: Keep gray borders explicitly */
table {
  border-color: gray;
}

/* Option 2: Use currentColor intentionally (matches text) */
table {
  border-color: currentColor;
}

/* Option 3: Use a specific token from your design system */
table {
  border-color: var(--border-color, rgba(0,0,0,0.2));
}

see also

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗