v148 · CSS · UA stylesheet

Edge Case Gallery

Eight stress-test scenarios: dark mode, branded themes, high-contrast, nested tables, RTL layouts, striped rows, forced-colors, and narrow/overflow containers. Each card shows the Chrome 148 currentColor result alongside the pre-148 grey simulation — toggle per card.

Dark mode currentColor

Category	Value
Background	#1a1a1a
Text	#e0e0e0

Borders match the light text (#e0e0e0) — visible in dark mode.

Brand colour currentColor

Quarter	Revenue
Q1	$1.2M
Q2	$1.5M

Borders match brand blue (#0022ff). Pre-148: grey clash.

High contrast currentColor

Status	Count
Active	42
Inactive	7

White borders on black — maximum contrast. Pre-148: grey-on-black barely visible.

Warm theme currentColor

Item	Price
Latte	$4.50
Croissant	$3.00

Warm brown borders (#5c3a1e) feel cohesive. Pre-148: cold grey intrudes.

Nested tables cascade

Outer cell

Inner A	Inner B
1	2

Sibling

Both outer and inner borders inherit the same green (#007755). Pre-148: inner stays grey.

RTL layout direction

المنتج	الكمية
قلم	١٠
دفتر	٥

RTL Arabic text; borders match purple (#440088). Pre-148: grey regardless of direction.

Striped rows nth-child

Name	Score
Alice	98
Bob	87
Carol	92
Dave	75

Borders stay navy (#003366) across striped and unstriped rows. Pre-148: grey, inconsistent.

Narrow / overflow responsive

Col A	Col B	Col C	Col D
1	2	3	4
5	6	7	8

Scroll horizontally — borders remain dark red (#8b0000) at all widths. Pre-148: grey throughout.

Summary

Every case above shows the same pattern: in Chrome 148+, table cell borders inherit the wrapper element's color because the UA stylesheet no longer overrides border-color to gray. The pre-148 simulations (toggle "Pre-148" on any card) pin borders to grey — clashing in dark mode, invisible against dark backgrounds, and coherence-breaking on any branded palette.

implementation reference

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