interop
interop copied to clipboard
web-platform-tests
Consistent color for ridge/groove borders
Description
When using the special 3D-esque border-style values of ridge or groove, browsers render them with very inconsistent shifts in color when using darker colors:
Firefox
Remains close to the source color, the effect being subtle for darker colors
Chrome
Pushes to the extremes for the light and dark versions, creating a sharp contrast
Safari
Brightens the color a lot before creating a slightly darker and lighter version
In my tests, I am using a dark brown (#2f1913), where this difference is very noticeable. However, if you use a native red value, it looks consistent across all 3 major browsers.
You can check the result in this demo: [interop issue] ridge and groove border-style cross-browser differences (update the --c property to change the colors).
Obviously, this is a very low priority, but it still would be nice to get consistency across browsers!
Specification
W3C
Additional Signals
No response
Not ridge/grove/inset/outset related but found out Safari still doesn't have circular dotted borders for border-style: dotted; It also breaks pretty badly when you add a border-radius above 6px.
(FYI, I remember Chrome having these same issues at one point but they have since been fixed)
https://codepen.io/jsnkuhn/pen/MWNYYMZ
There is no standard for this yet, see: https://github.com/w3c/csswg-drafts/issues/9393
@nt1m Oh thank you for sharing, I had not seen this… thought I might be the only person to have tried to use these border styles in this century haha. (I see we both ran into this issue while making our websites 😅)
I implemented the WebKit algorithm to honor the border-color with 3D styles and I'm also disappointed by the lack of standard. Happy to align to whatever algorithm ends up being standardized.
Thank you for proposing Consistent color for ridge/groove borders for inclusion in Interop 2025.
We wanted to let you know that this proposal was not selected to be part of Interop this year.
On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.
For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.
Posted on behalf of the Interop team.
