Remove explicit border color UA stylesheet rule for tables

concepts

1. Border Color Demo

   Shows a table with no explicit border-color set. In Chrome 149+, the border inherits from the element's color property as the spec requires. Before Chrome 149, it was always gray.

2. Migration Guide

   What changes and what you may need to update. Most sites are unaffected; sites that relied on the implicit gray default border and then overrode color may see borders change to match the text color.

3. Color Cascade Explorer

   Pick any color value with a colour picker and toggle between inherit/gray/explicit border-color modes on a live table. See the cascade breakdown at each step and compare the old UA-bug behaviour with the Chrome 149 spec-compliant result.

4. Theme Inheritance Demo

   Pick a colour theme (Corporate Blue, Forest, Sunset, Dark Mono) or use the custom colour picker — applied only via the color property on the container. Watch table borders follow the theme in Chrome 149+ without any border-color rule in your CSS. A cascade-info panel shows the computed border-color alongside the set color and confirms whether they match.

   Interactive CSS cascade Theming

5. Dark Mode Tables

   The most visible impact of the UA fix: dark-mode tables. Before Chrome 149, border-color: gray from the UA stylesheet gave low-contrast borders on dark backgrounds. A four-card comparison shows light/dark mode against pre-149/Chrome-149 behaviour. A live simulator lets you toggle dark mode and the old gray-border bug to see the contrast difference directly.

   Interactive Dark mode Contrast

6. Print Table Borders

   Print stylesheets often set color for high contrast on paper — dark text on white, or light text for dark PDF exports. Chrome 149's fix means table borders automatically follow the print color without a separate border-color rule. Toggle between light and dark report themes and between pre-149 UA gray vs Chrome 149 currentColor to see the live contrast ratios.

   Interactive Print Contrast

why it shipped

The HTML spec's UA stylesheet for tables (html.spec.whatwg.org/…#tables-2) does not contain a border-color rule. Chrome previously had border-color: gray hardcoded, which overrode the CSS cascade and prevented the border from inheriting the author's color value — a fundamental CSS principle. Chrome 149 removes the rule to achieve spec compliance and match Firefox and Safari behaviour.

the change

/* Before Chrome 149 — erroneous UA rule (now removed): */
/* table { border-color: gray; } ← was in Chrome's UA stylesheet */

/* Effect: even if you wrote... */
table {
  color: blue;
  border: 1px solid;  /* border-color inherits from color... */
}
/* ...the UA's border-color: gray won the cascade, so borders were gray */

/* Chrome 149+: the erroneous UA rule is gone.
   Now border-color properly inherits from color as the spec requires: */
table {
  color: blue;
  border: 1px solid;  /* → border-color is now blue, matches text color */
}

/* If you need gray borders regardless: */
table {
  border-color: gray;  /* explicit — your code controls it */
}

references

• ChromeStatus entry
• MDN — table element
• HTML spec — UA stylesheet for tables