mozilla

border-color

Übersicht

Die border-color Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.

  • Standardwert the concatenation of the initial values of its longhand properties:
    • border-top-color: currentColor
    • border-right-color: currentColor
    • border-bottom-color: currentColor
    • border-left-color: currentColor
  • Anwendbar auf Alle Elemente
  • Vererbt Nein
  • Prozentwerte
  • Medium visuell
  • Berechneter Wert wie die einzelnen Werte der Kurzschreibweise:
    • border-bottom-color: If the value ist translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
    • border-left-color: If the value ist translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
    • border-right-color: If the value ist translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
    • border-top-color: If the value ist translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
  • Animierbar wie die jeweiligen Kurzschreibweisen:
    • border-bottom-color: Ja, als Farbe
    • border-left-color: Ja, als Farbe
    • border-right-color: Ja, als Farbe
    • border-top-color: Ja, als Farbe
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

border-color:  <color>{1,4}

Werte

<Farbe>
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
transparent
Der Rahmen hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
inherit
Der Wert des Elternelements wird geerbt.
Ein Wert
Gilt für alle vier Seiten: border-top-color, border-right-color, border-bottom-color und border-left-color.
Zwei Werte
Der erste Wert gilt für border-top-color und border-bottom-color, der zweite Wert für border-right-color und border-left-color.
Drei Werte
Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color und border-left-color und der dritte Wert für border-bottom-color.
Vier Werte
Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color, der dritte Wert für border-bottom-color und der vierte Wert für border-left-color.

Beispiele

.beispielEins {                      
  border: solid;
  border-color: blue;
}
.beispielZwei {
  border: solid;
  border-color: blue #f00;
}
.beispielDrei {
  border: solid;
  border-color: blue #f00 rgb(0,150,0);
}
.beispielVier {
  border: solid;
  border-color: blue #f00 rgb(0,150,0) transparent;
}

Spezifikation

Spezifikation Status Anmerkung
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation The transparent keyword has been removed as it is now a part of the <color> data type.
CSS Level 2 (Revision 1) Recommendation The property is now a shorthand property
CSS Level 1 Recommendation  

Browser Kompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) [1] 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1.9.2) [1] ? ? ?

[1] The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox. -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: fscholz
Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden