Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Veraltet seit Gecko 59 (Firefox 59 / Thunderbird 59 / SeaMonkey 2.56)
Dieses Feature ist veraltet. Obwohl es in manchen Browsern immer noch funktioniert, wird von seiner Benutzung abgeraten, da es jederzeit entfernt werden kann. Es sollte daher nicht mehr verwendet werden.

In Mozilla-Anwendungen wie Firefox, setzt die -moz-border-top-colors CSS Eigenschaft eine Liste von Farben für den rechten Rand.

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

Initialwertnone
Anwendbar aufalle Elemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Sie wird nicht angewendet

  1. wenn border-style dashed oder dotted ist.
  2. auf Tabellen mit border-collapse: collapse.

Syntax

/* Einzelner <color> Wert */
-moz-border-right-colors: #f0f0f0;

/* Mehrere <color> Werte */
-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;

/* Globale Werte */
-moz-border-right-colors: inherit;
-moz-border-right-colors: initial;
-moz-border-right-colors: unset;

Werte

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

<color>
Definiert die Farbe einer Linie von Pixeln des rechten Randes. transparent ist gültig. Siehe <color> Werte für mögliche Einheiten.
none
Es werden keine Farben gezeichnet oder border-color verwendet, falls angegeben.

Formale Syntax

<color>+ | none

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Beispiel

<div id="example">Beispiel</div>
#example {
  padding: 20px;
  background-color: gray;
  border: 10px solid black;
  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
}

Spezifikationen

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende Unterstützung
Nicht standardisiert
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung 1 — 59
Hinweise
Keine Unterstützung 1 — 59
Hinweise
Hinweise In Firefox 59, the property was limited to usage in chrome code only (See bug 1417200).
Hinweise In Firefox 60, the property was removed completely (See bug 1429723).
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung 4 — 59
Hinweise
Keine Unterstützung 4 — 59
Hinweise
Hinweise In Firefox 59, the property was limited to usage in chrome code only (See bug 1417200).
Hinweise In Firefox 60, the property was removed completely (See bug 1429723).
Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Keine Unterstützung  
Keine Unterstützung
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, teoli, Sebastianz
Zuletzt aktualisiert von: SJW,