v148 · removal · UA stylesheet · CSS

Themed Data Grid

Pick a text color and watch the table borders follow — no explicit border-color needed. Chrome 148 removed the UA stylesheet's hard-coded grey border rule, so table borders now inherit from currentColor like every other element.

Before Chrome 148, the UA stylesheet pinned border-color on table elements to gray, overriding the author's color inheritance. A live table in Chrome 148+ now inherits currentColor correctly — the control below lets you see the difference at any text color.
Text
Background

Chrome 148+ currentColor

Borders inherit from text color — no border-color set on the table.

ProductCategoryStockPrice
Laptop ProElectronics42$1,299
Wireless MousePeripherals153$49
USB-C HubAccessories87$79
Mechanical KeyboardPeripherals26$149

Pre-Chrome 148 gray border

UA stylesheet forced border-color: gray, ignoring the author's color.

ProductCategoryStockPrice
Laptop ProElectronics42$1,299
Wireless MousePeripherals153$49
USB-C HubAccessories87$79
Mechanical KeyboardPeripherals26$149

The fix in one line

/* Before Chrome 148 — UA stylesheet (simplified): */
table { border-color: gray; }

/* After Chrome 148 — rule removed.
   Table borders now inherit from `color` via currentColor. */

/* Your theme, no workaround needed: */
.data-grid {
  color: #1e40af;          /* text AND border both go blue */
  background: #eff6ff;
}

/* If you want borders a different shade, you still can: */
.data-grid td { border-color: oklch(from currentColor l c h / 0.4); }

references

implementation reference

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