CSS-Eigenschaft: border-color, Kategorien: Farben (allgemein), Rahmen (allgemein), Box model (CSS 2.1), Backgrounds and Borders (CSS 3)
Rahmenfarbe (allgemein)
Bestimmt die Rahmenfarbe der unterschiedlichen HTML-Elemente.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Rahmenfarbe (allgemein) |
| Farbwert, der über 'color' gesetzt ist. |
|
Verwandte Eigenschaften aus der Kategorie: Farben (allgemein), Rahmen (allgemein), Box model (CSS 2.1), Backgrounds and Borders (CSS 3):
- background
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- Aktuelle Seite: border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
- box-sizing
- color
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- opacity
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- text-decoration-color
Folgendes ist beim Einsatz von border-color zu beachten:
- Benötigt immer eine Angabe des border-style, damit der Rahmen dargestellt wird. Eine Stärkenangabe über border-width ist alleine nicht ausreichend. (Der Defaultwert von border-style ist none!)
- Ist die Kurzschreibweise für border-top-color, border-right-color, border-bottom-color und border-left-color.
- In der Kurzschreibweise können 1 bis 4 Werte angegeben werden können.
- Die Parameter wirken in der Reichenfolge [oben][rechts][unten][links]. Oder einfacher zu merken, ab 12:00 Uhr im Uhrzeigersinn, also [12:00][3:00][6:00][9:00].
- Werden keine 4 Parameter übergeben, wird die fehlende Farbe von der gegenüberliegenden Seite übernommen. Das heißt, fehlt die 4. Angabe für den linken Rahmen, wird die Farbe von rechts (2. Parameter) übernommen, fehlt auch der 3. Parameter für unten, wird die Farbe von oben (1. Parameter) übernommen. Die Angabe von nur einem Parameter bestimmt die Farbe von allen Seiten.
- Ist gleichzeitig ein Parameter in der Kurzschreibweise border, dort kann allerdings nur eine Farbangabe für alle vier Seiten vergeben werden.
- Ist keine Farbangabe gesetzt, wird die color des Textes des BODY bzw. des relevanten Elements als Rahmenfarbe verwendet.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu border-color:
- W3C Spezifikation:
http://www.w3.org/TR/css3-background/#border-color
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
border-collapse - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
border-image
Beispiele
HTML:
<p>ein Stück Text</p>CSS:
p {
border: 10px solid;
padding: 25px;
color: blue;
}
/* Basisangabe für alle Beispiele.
Ist keine Farbe angegeben, wird die Textfarbe verwendet. */Beispiel Nr. 1 So sieht's aus:
ein Stück Text
HTML:
<p class="doRed">ein Stück Text</p>CSS:
p.doRed {
border-color: red;
}
/* border-color verleiht dem Rahmen die Farbe. */Beispiel Nr. 2 So sieht's aus:
ein Stück Text
HTML:
<div class="doWidth">
<div>ein Stück Text</div>
<div class="doStyle">ein Stück Text</div>
</div>CSS:
div.doWidth div {
border-width: 20px;
border-color: #00C800;
color: red;
padding: 20px;
}
/* Die alleinige Angabe von Rahmenstärke und Rahmenfarbe ist nicht ausreichend. */
div.doWidth div.doStyle {
border-style: double;
}
/* Erst eine Angabe von border-style bringt den Rahmen zum vorscheinen.
Dabei reicht auch ein geerbter Rahmenstyle aus. */Beispiel Nr. 3 So sieht's aus:
ein Stück Text
ein Stück Text
HTML:
<p class="doZwei">ein Stück Text</p>CSS:
p.doZwei {
border-color: red blue;
}
/* Werden zwei Parameter übergeben, dient die erste Angabe für die obere und untere Rahmenfarbe, der zweite für rechts und links. */Beispiel Nr. 4 So sieht's aus:
ein Stück Text
HTML:
<p class="doDrei">ein Stück Text</p>CSS:
p.doDrei {
border-color: red blue yellow;
}
/* Bei drei Angaben wird der erste Parameter oben angezeigt, der zweite rechts und links, der dritte unten. */Beispiel Nr. 5 So sieht's aus:
ein Stück Text
HTML:
<p class="doVier">ein Stück Text</p>CSS:
p.doVier {
border-color: red blue yellow green;
}
/* Die maximale Angabe von vier Parameter bestimmten die Reichenfolge der Rahmenfarbe von oben - rechts - unten - links. */Beispiel Nr. 6 So sieht's aus:
ein Stück Text
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!