v149 · CSS · UA Stylesheet
Theme Inheritance Demo
Pick a color theme — applied via only a color property on the container. Watch how table borders now follow the theme in Chrome 149+, because border-color correctly inherits from color without a UA override forcing them gray.
Custom color:
applied only via
color property — no border-color
Container has only
color set — borders inherit in Chrome 149+| Product | Q1 | Q2 | Q3 | Status |
|---|---|---|---|---|
| Widget A | $12,400 | $14,100 | $16,800 | Growing |
| Widget B | $8,200 | $9,500 | $7,900 | Declining |
| Service X | $32,000 | $35,400 | $41,200 | Surging |
| License Y | $4,100 | $4,100 | $4,100 | Stable |
color: — (set on container — only rule applied)
border-color (computed): — (inherits from color in Chrome 149+)
Before Chrome 149 — UA forces gray
| Product | Value |
|---|---|
| Widget A | $12,400 |
| Widget B | $8,200 |
UA stylesheet:
Borders are always gray, ignoring the author's
table { border-color: gray; }Borders are always gray, ignoring the author's
color.
Chrome 149+ — borders inherit color
| Product | Value |
|---|---|
| Widget A | $12,400 |
| Widget B | $8,200 |
UA rule removed.
Table matches the theme without any extra CSS.
border-color inherits from color: #1a3a5c.Table matches the theme without any extra CSS.
see also
- Border Color Demo — the basic fix
- Color Cascade Explorer — cascade breakdown with color picker
- Dark Mode Tables — prefers-color-scheme with correct border inheritance
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗