Border color for tables

[atjn]

Description

If I am writing a document with tables, I would like my table borders to be the same color as my text (by default):

This works in Firefox but in Chrome, Edge, and Safari it looks like this:

It would be really nice if engines could standardize this behavior.

WPT tests to include

This issue is tested by the following two tests that should be included in Interop 2025:

• html/rendering/non-replaced-elements/tables/table-border-3s.html
• html/rendering/non-replaced-elements/tables/table-border-3q.html

Specification

border-color's initial value should be currentcolor: https://www.w3.org/TR/css-backgrounds-3/#border-color

There are no recommended stylesheets that override that value for tables: https://html.spec.whatwg.org/multipage/rendering.html#tables-2

Additional Signals

Workarounds

Many websites include a CSS reset that forces the behavior seen in Firefox. Here are two examples of popular CSS reset libraries doing that:

• https://github.com/sindresorhus/modern-normalize/blob/3faa07fc91b8ffbe6243bc4f91e880a00185d0a2/modern-normalize.css#L109..L115
• https://github.com/csstools/normalize.css/blob/23b18687d9bbaa8ef108064cd3f11c0941ec697e/normalize.css#L93..L101

Browser bugs

There are long standing bugs to fix this issue for both engines:

• Chromium: Blink has special UA stylesheet rule to give table border-color:grey, which doesn't quite match spec & may be historical cruft
• Webkit: WebKit has special UA stylesheet rule to give tables border-color:grey, whi...

Historical note

Chromium and Webkit sets a grey border color because it provided interoperability with old versions of Internet Explorer. The rule was previously part of the HTML spec but was removed in 2019: https://github.com/whatwg/html/pull/4398