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)
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Enhancement
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2010-05-30 20:54 PDT by Giorgio
Modified: 2022-06-20 22:15 PDT (History)
7 users (show)

See Also:


Attachments

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

-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
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:

<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)
;
Comment 2 Giorgio 2010-05-30 22:34:43 PDT
or box-shadow can provide a way to enable and disabled the blending

box-shadow-blend:true||false

(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:

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!
Comment 4 Radar WebKit Bug Importer 2022-06-20 17:01:56 PDT
<rdar://problem/95558324>
Comment 5 Ryosuke Niwa 2022-06-20 22:15:46 PDT
We definitely support border-color.