v148 · removal · ua stylesheet · css

Remove explicit border-color UA stylesheet rule for tables

Chrome's user-agent stylesheet was pinning the border-color of <table>, <tr>, <td>, and friends to a hard-coded grey. That rule overrode the inherited color, breaking sites that wanted the table border to follow text colour. With the rule removed, table borders now inherit from currentColor like every other element.

concepts

  1. currentColor Table

    Set the page's text colour, watch the table borders track it automatically. Compare a "before" simulation (with an explicit grey override) against the new default.

  2. Dark Mode Borders

    The bigger win: theme switching. Swap between light, dark, brand, and warm panel themes and watch modern tables track currentColor seamlessly while legacy tables stay grey — disappearing in dark mode, clashing on brand panels.

  3. Themed Data Grid

    Pick any text and background color. Chrome 148's left panel shows table borders inheriting from currentColor with no border-color rule at all; the right panel simulates the old forced-grey UA override — both live side by side.

  4. Table Styling Reset

    Five table designs (Minimal, Dark mode, Colored headers, Striped rows, Financial report) using zero border-color declarations. A color picker and presets change the color property and all borders follow via currentColor. A "Before Chrome 148" toggle re-applies border-color: gray to every cell to demonstrate the old UA behaviour.

  5. Border Cascade Tester

    Pick any text and background color (or use theme presets). A live cascade trace shows exactly which rule wins at each step — Chrome 148 allows border-color to inherit from currentColor, while the Pre-148 panel shows the UA stylesheet's gray override locking the border regardless of your color choice.

  6. Authoring Studio

    Pick a text colour, background, and border width from presets or custom colour pickers. The live split stage updates instantly — Chrome 148's left panel uses zero border-color declarations while the right simulates the pre-148 grey UA override. Copy the generated production CSS when you're happy.

  7. Compatibility Lab

    Live CSS.supports() probes that report what your current browser supports, a DOM-injection probe that reads the computed border-color back, a before/after rendering toggle, and a browser compatibility matrix. Includes the old UA rule snippet and a migration guide.

  8. Edge Case Gallery

    Eight stress-test cards: dark mode, brand colours, high contrast, warm theme, nested tables, RTL Arabic layout, striped rows, and narrow overflow containers. Toggle each card between Chrome 148 (currentColor) and pre-148 simulation (forced gray) to see where the old UA rule caused visual regressions.

why it shipped

The UA stylesheet rule was a holdover from when tables had a baked-in look. Modern sites style tables themselves and expect border-color to inherit from the cascade. Pinning it to a specific grey value meant authors had to write border-color: currentColor explicitly to undo the UA rule — and they often forgot. Dropping the rule aligns table borders with every other element's default, and matches Firefox and Safari.

references

implementation reference

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