PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

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.

CSS-Eigenschaft: border-color
KurzbeschreibungWerteStandardwertKategorieHinweis
Rahmenfarbe (allgemein)
  • <color>
  • transparent
  • inherit
Farbwert, der über
'color' gesetzt ist.
Allgemein:
Farben
Rahmen
CSS 2.1:
Box model
CSS 3:
Backgrounds and Borders
 

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.
Browserunterstützung von border-color
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu border-color:



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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.149 sec.