Bug 39938 – provide a webkit equivalent for -moz-border-*-colors (multiple border colors)

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Giorgio]

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

-moz-border-top-colors:;
-moz-border-left-colors:;
-moz-border-right-colors:;
-moz-border-bottom-colors:;

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

http://www.css3.info/preview/colored-border/

thank you for your work! greetings from italy

[Giorgio]

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:

<style>
.test
{
-webkit-box-shadow:
0 0 0 10px rgba(255,0,0,0.5)
,
0 0 0 20px rgba(0,255,0,0.5)
;
margin:30px;
}
</style>
<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...

-webkit-box-shadow:
0 0 0 10px rgba(255,0,0,0.5)
,
0 0 0 10px [10px 10px 10px 10px] rgba(0,255,0,0.5)
;

[Giorgio]

or box-shadow can provide a way to enable and disabled the blending

box-shadow-blend:true||false

(sorry for multiple posting)

[Ahmad Saleem]

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:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-color


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!

[Radar WebKit Bug Importer]

<rdar://problem/95558324>

[Ryosuke Niwa]

We definitely support border-color.