Bug 39938 - provide a webkit equivalent for -moz-border-*-colors (multiple border colors)
Summary: provide a webkit equivalent for -moz-border-*-colors (multiple border colors)
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Enhancement
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2010-05-30 20:54 PDT by Giorgio
Modified: 2022-06-20 22:15 PDT (History)
7 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Giorgio 2010-05-30 20:54:35 PDT
hi, some months ago I've suggested to include multiple borders in the css3 spec without success

i think that to use XBL for multiple borders is absolutely stressful 

in Mozilla XUL's style these properties are used frequently


to define multiple border colors for widgets

and flexbox web app are coming, and I'm in one team that is developing a next generation web gui framework,
so, for parity, i hope to see this (or better implementations) in Webkit,
all the alternative solutions (border-image, xbl) are crazy to use just for borders


thank you for your work! greetings from italy
Comment 1 Giorgio 2010-05-30 22:26:11 PDT
an interesting solution can be use box shadows

but with rgba and hsla colors outer shadow color is mixed with the inner shadow color

test this:

0 0 0 10px rgba(255,0,0,0.5)
0 0 0 20px rgba(0,255,0,0.5)
<div class="test">test</div>

inner shadow (red) is mixed with the outer shadow color (green)

so in the box-shadow property can provide a way to set the outset position of the shadow

for example...

0 0 0 10px rgba(255,0,0,0.5)
0 0 0 10px [10px 10px 10px 10px] rgba(0,255,0,0.5)
Comment 2 Giorgio 2010-05-30 22:34:43 PDT
or box-shadow can provide a way to enable and disabled the blending


(sorry for multiple posting)
Comment 3 Ahmad Saleem 2022-06-20 17:01:28 PDT
Based on following - https://caniuse.com/?search=border-color

Webkit / Safari do support CSS3 property "border-color" except Mozilla's non-standard one and I can test it on below link:


Although on CSS3test.com, it does not show as "Green" (highlighting support).

Web Spec link - https://www.w3.org/TR/css-backgrounds-3/#propdef-border-color

Considering MDN demo and CANIUSE confirm that Webkit/Safari support standard specific "border-color" property, I think this can be closed as "RESOLVED INVALID" or "RESOLVED DUPLICATE OF XYZ". Thanks!
Comment 4 Radar WebKit Bug Importer 2022-06-20 17:01:56 PDT
Comment 5 Ryosuke Niwa 2022-06-20 22:15:46 PDT
We definitely support border-color.