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


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 …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>border-width</title>
    <style>
      p { width: 30em; padding: 0 1em; }
	
      .links {
        border-left-width:   5px;
        border-left-style:   solid;
        border-color:        #FFCCCC;
      }

      .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:    lightgray;
        border-width:        6px;
        border-style:        solid;
        border-color:        gray;
	border-right-color:  black;
	border-bottom-color: black;
      }
    </style>
  </head>
  <body>
    <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>
  </body>
</html>


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.