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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

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[Bearbeiten]

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

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

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>
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[Bearbeiten]

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[Bearbeiten]

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

Weblinks[Bearbeiten]