CSS/Eigenschaften/äußere Gestaltung/Rahmen/border-color

Sie können mit der Eigenschaft border-color für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Rahmentyp und/oder einer Angabe zur Rahmendicke kombinieren.

• 
• 
• 
• 
• 
• 

Folgende Angaben sind möglich:

• currentColor: Standardwert, aktuell festgelegte Farbe
• transparent
• Farbangabe: eine, oder mehrere Farbwerte. (Wenn mehrere Werte angegeben werden, gelten Sie für oben rechts, unten, links)

alle Seiten eines Elements

Mit border-color: können Sie die Rahmenfarbe bestimmen.

• 
• 
• 
• 
• 
• 

Erlaubt ist eine Farbangabe oder der Wert transparent. Letzteres ergibt einen durchsichtigen Rahmen, welches interessante Effekte bei sich überlappenden Elementen ermöglicht.

Beachten Sie: Eine Angabe zur Rahmenfarbe wird nur interpretiert, wenn auch eine Angabe zum Rahmentyp erfolgt.

Beispiel ansehen …

p { width: 30em; padding: 0 1em; }

.links {
  border-left-width:   5px;
  border-left-style:   solid;
  border-color:        pink;
}

.linksrechts {
  border-left-width:   1em;
  border-left-style:   solid;
  border-left-color:   red;
  border-right-width:  1.5em;
  border-right-style:  solid;
  border-right-color:  green;
}

.rundrum {
  background-color:    lightgrey;
  border-width:        6px;
  border-style:        solid;
  border-color:        grey;
  border-right-color:  black;
  border-bottom-color: black;
}

    <p class="links">Dies kennen Sie wahrscheinlich ...</p>
    <p class="linksrechts">Dies ist ... Textabsatz mit einem Rahmen links und rechts.</p>
    <p class="rundrum">Bereits mit einfachen Mitteln lassen sich interessante Effekte erzielen.</p>

ansehen …

Beachten Sie: Bei den Farbnamen grey, bzw. lightgrey (British English) sind auch die alternativen Schreibweisen gray und lightgray (American English) erlaubt.

einzelne Seiten eines Elements

Um für einzelne Seiten des Elements mit der Eigenschaft border-color unterschiedliche Rahmenfarben zu bestimmen, beachten Sie folgende Regeln:

• Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
• Zwei Angaben: 1. Wert für oben und unten, 2. Wert für links und rechts
• Drei Angaben: 1. Wert für oben, 2. Wert für links und rechts, 3. Wert für unten
• Vier Angaben: 1. Wert für oben, 2. Wert für rechts, 3. Wert für unten, 4. Wert für links

Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

Außerdem können Sie auch entsprechende Werte für

• border-top-color, definiert die Rahmenfarbe für oben,
• border-right-color, die Rahmenfarbe für rechts,
• border-bottom-color, die Rahmenfarbe für unten und
• border-left-color, die Rahmenfarbe für links

angeben.

Rahmenfarbe als Verlauf

Sie können einen Rahmen auch mit einem Farbverlauf einfärben, wenn Sie die Eigenschaft border-image verwenden.

Weblinks

• csswg.org: border-color