CSS border-color Eigenschaft

Definition und Verwendung

Die border-color-Eigenschaft legt die Farben der vier Ränder fest. Diese Eigenschaft kann 1 bis 4 Farben festlegen.

Die border-color-Eigenschaft ist eine Abkürzung, mit der die Farbe aller sichtbaren Ränder eines Elements festgelegt werden kann, oder für jede der vier Ränder eine unterschiedliche Farbe festgelegt werden kann. Sehen Sie sich das folgende Beispiel an:

Beispiel 1

border-color:red green blue pink;
  • Der obere Rand ist rot
  • Der rechte Rahmen ist grün
  • Der untere Rand ist blau
  • Der linke Rand ist rosa

Beispiel 2

border-color:red green blue;
  • Der obere Rand ist rot
  • Der rechte und linke Rand sind grün
  • Der untere Rand ist blau

Beispiel 3

border-color:dotted red green;
  • Der obere und untere Rand sind rot
  • Der rechte und linke Rand sind grün

Beispiel 4

border-color:red;
  • Alle 4 Ränder sind rot

Zu beachten ist, dass der Randstil nicht "none" oder "hidden" sein darf, sonst wird die Kante nicht angezeigt.

Anmerkung:Legen Sie immer den border-style-Attribut vor dem border-color-Attribut fest. Das Element muss vor dem Ändern der Farbe eine Kante haben.

Siehe auch:

CSS-Tutorial:CSS Rand

HTML DOM Referenzhandbuch:borderColor-Eigenschaft

Beispiel

Stellen Sie die Farben der 4 Ränder ein:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Probieren Sie es selbst aus

CSS-Syntax

border-color: color|transparent|initial|inherit;

Attributwert

Wert Beschreibung
color_name Es wird die Randfarbe in Farbnamen (z.B. rot) vorgeschrieben.
hex_number Es wird die Randfarbe in Hexadezimalwert (z.B. #ff0000) vorgeschrieben.
rgb_number Es wird die Randfarbe in RGB-Code (z.B. rgb(255,0,0)) vorgeschrieben.
transparent Standardwert. Die Randfarbe ist transparent.
inherit Es wird vorgeschrieben, dass die Farbe des Rands vom übergeordneten Element geerbt wird.

Technische Details

Standardwert: nicht spezifiziert
Vererbbarkeit: nein
Version: CSS1
JavaScript-Syntax: object.style.borderColor="#FF0000 blue"

Mehr Beispiele

Farben der vier Ränder einstellen
Dieses Beispiel zeigt, wie man die Farben der vier Ränder einstellt. Man kann eine bis vier Farben einstellen.

Browser-Unterstützung

Die Nummern in der Tabelle weisen auf die erste Browser-Version hin, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Anmerkung:Internet Explorer 6 (und frühere Versionen) unterstützen den Attributwert "transparent" nicht.

Anmerkung:Internet Explorer 7 und frühere Browser unterstützen den Wert "inherit" nicht. IE8 erfordert !DOCTYPE. IE9 unterstützt "inherit".