1999938 - Inconsistent border rendering on rounded elements when color is implicit vs explicit

Status: RESOLVED FIXED

(Core :: Web Painting, defect, P3)

Description

[leeroyjenkins176]

Attachment: Screenshot 2025-11-13 at 13-17-50 Untitled.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Steps to reproduce:

Summary:
Firefox shows a visual difference in border rendering on rounded elements (border-radius: 50%) depending on how the color is specified. When using border: 10px solid (without explicit color) or border: 10px solid currentcolor, the border has a slight shadow/blur effect of ~1px. When using border: 10px solid #fff (or any explicitly specified color), this effect is absent.

<style>
div {
  display: block;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background-color: #323232;
}
:root {
  --color: #fff;
  background: var(--color);
  color: var(--color);
}
.demo-1 {
  border: 10px solid;
}
.demo-2 {
  border: 10px solid currentcolor;
}
.demo-3 {
  border: 10px solid var(--color);
}
</style>

<div class="demo-1"></div>
<div class="demo-2"></div>
<div class="demo-3"></div>

https://codepen.io/coyibe2003/pen/ogxjBqN

Actual results:

.demo-1 and .demo-2 have a visible shadow/blur effect on the border (~1px)
.demo-3 looks without this effect

Expected results:

Border rendering should be identical since the final computed color is the same (#fff in all cases).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

The explanation is here: https://searchfox.org/firefox-main/rev/5ccf4a7d77a329f237d3a41e400049f9c47dc71f/layout/painting/nsCSSRendering.cpp#1966-1969

We should be able to plumb the right foreground color there tho.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1999938 - Take foreground color into account in border transparency computation. r=tnikkel,#layout

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ff84b5499016
https://hg.mozilla.org/integration/autoland/rev/15510701bff7
Take foreground color into account in border transparency computation. r=jwatt

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/bd28c9a0c61b
https://hg.mozilla.org/integration/autoland/rev/ba684b36094f
Tweak fuzzy count on two fragmentation reftests.

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/56451 for changes under testing/web-platform/tests

Comment 7

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/15510701bff7
https://hg.mozilla.org/mozilla-central/rev/ba684b36094f

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot