0251 / 590 644 - 0
info@a-coding-project.de

CSS: Rahmeneigenschaften

Wie im Kapitel CSS - Box-Eigenschaften schon erwähnt gehört zu den Eigenschaften einer Box auch die Definition von Rahmen, welche diese Box umgeben.

CSS Level 2 border-top-color, border-bottom-color, border-left-color und border-right-color

Die border-top-color-, border-bottom-color-, border-left-color- und border-right-color-Eigenschaften beschreiben jeweils die Frabe eines der Rahmenstücke. border-top-color beschreibt die Farbe des oberen Rahmens, border-bottom-color die des unteren. Die border-left-color-Eigenschaft beschreibt die Farbe des linken Rahmens und die border-right-color-Eigenschaft die des rechten. Als Wert kann eine Farbe angegeben werden. Beispiel:

P { border-top-color:red; border-bottom-color:green; }
DIV { border-left-color:'#ff0000'; border-right-color:rgb(0,255,0); } 

CSS Level 1 CSS Level 2 border-color

Die border-color-Eigenschaft ist eine Zusammenfassung der vier oben genannten Rahmenfarben-Eigenschaften. Es können dabei ein bis vier Farbangaben als Wert notiert werden. Wird eine Angabe getätig, so gilt diese für alle vier Eigenschaften. Werden zwei Werte notiert, so gilt der erste für die Rahmenfarben oben und unten (top und bottom) und der zweite für die verbleibenden beiden. Werden drei Werte notiert, so definiert der erste Wert die Rahmenfarbe oben, der zweite die rechts sowie links und der dritte die Rahmenfarbe unten. Werden alle vier Werte notiert so ist die Reihenfolge der Eigenschaften: oben, rechts, unten, link. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:

P.a { border-color: red green red yellow; }
P.b { border-color: '#f0f0f0' '#ccff00'; } 

CSS Level 2 stellt zusätzlich den Wert transparent zur Verfügung. Er kann nur allein (d.h. ohne weitere Rahmenfarben) notiert werden und besagt, dass der Rahmen transparent/durchscheinend sein soll.

CSS Level 2 border-top-style, border-bottom-style, border-left-style und border-right-style

Die Eigenschaften border-top-style, border-bottom-style, border-left-style und border-right-style beschreiben jeweils die Art/den Stil eines der Rahmenstücke. border-top-style steht dabei für den Stil des oberen Rahmens, border-bottom-style für den des unteren. Die border-left-style-Eigenschaft beschreibt den Stil des linken Rahmens und die border-right-style-Eigenschaft den des rechten. Als Wert kann jeweils einer der folgenden angegeben werden:

  • dashed - gestrichelte Linie
  • dotted - gepunktete Linie
  • double - doppelte Linie (zwei Striche)
  • groove - erzeugt einen Pyramiden-Effekt. Der Inhalt wirkt, als ob er auf einer Pyramide dargestellt werden würde.
  • inset - erzeugt einen Hervorhebe-Effekt. Der Rahmen sieht so aus, als ob er sich vom Hintergrund abhebt (ähnlich groove).
  • none - kein Rahmen
  • outset - Gegenteil von inset. Der Rahmen sieht so aus, als ob er den Hintergrund eindrückt (ähnlich ridge).
  • ridge - Gegenteil von groove. Der Inhalt sieht so aus, als ob eine Pyramide in den Boden gehen würde.
  • solid - einfache Linie
Beispiel:

H1 { border-top-style:solid; border-bottom-style:dotted; }
DIV { border-left-style: none; border-right-style: groove; } 

CSS Level 1 border-style

Die border-style-Eigenschaft ist eine Zusammenfassung der vier oben genannten Rahmenstil-Eigenschaften. Es können dabei ein bis vier Rahmenstile als Wert notiert werden. Wird eine Angabe getätig, so gilt diese für alle vier Eigenschaften. Werden zwei Werte notiert, so gilt der erste für den Rahmenstil oben und unten (top und bottom) und der zweite für die verbleibenden beiden. Werden drei Werte notiert, so definiert der erste Wert den Rahmenstil oben, der zweite die rechts sowie links und der dritte den Rahmenstil unten. Werden alle vier Werte notiert so ist die Reihenfolge der Eigenschaften: oben, rechts, unten, link. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:

P.a { border-style: solid; }
P.b { border-style: dotted solid; } 

CSS Level 1 border-top-width, border-bottom-width, border-left-width und border-right-width

Die Eigenschaften zur Bestimmung der Rahmenbreiten sind die Eigenschaften border-top-width, border-bottom-width, border-left-width und border-right-width. Jede von ihnen beschreibt die Breite eines Rahmenteilstückes. border-top-width beschreibt die Breite des oberen Rahmens, border-bottom-width die des unteren. Die border-left-width-Eigenschaft beschreibt die Breite des linken Rahmens und die border-right-width-Eigenschaft die des rechten. Die folgenden Werte können diesen Eigenschaften zugewiesen werden:

  • thin - ein dünner Rahmen
  • medium - ein normalbreiter Rahmen
  • thick - ein dicker Rahmen
  • Längenangaben - der Rahmen wird mit der angegebenen Breite dargestellt

P.a { border-top-width:2px; }
P.b { border-left-width:thick; } 

CSS Level 1 border-width

Die border-width-Eigenschaft ist eine Zusammenfassung der vier oben genannten Eigenschaften. Als Werte können ein bis vier Werte der o.g. Eigenschaften notiert werden. Wird ein Wert notiert, so beschreibt dieser alle vier Eigenschaften. Werden zwei Werte notiert, so beschreibt der erste Wert die Eigenschaft für den oberen (top) und unteren (bottom) Rahmen; der zweite Wert beschreibt die verbleibenden zwei Eigenschaften (left und right). Werden drei Werte notiert, so wird die obere Rahmenbreite vom ersten, die linke und rechte vom zweiten und die untere Rahmenbreite vom dritten Wert beschrieben. Werden alle vier Werte notiert so ist die Reihenfolge der Rahmenstücke: oben, rechts, unten, links. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:

P { border-width: thin; }
*.D { border-width: medium 3px thin thick; } 

CSS Level 1 border-top, border-bottom, border-left und border-right

Eine zusammenfassende Beschreibung der einzelnen Rahmenteile wird mit den Eigenschaften border-top, border-bottom, border-left und border-right definiert. Als Werte der Eigenschaften können jeweils die zu dem Rahmenabschnitt dazugehörigen Werte der anderen oben beschriebenen Eigenschaften notiert werden. Die border-top-Eigenschaft beispielsweise kann die Werte der border-top-width, border-top-color und border-top-style Eigenschaften erhalten. Eine Reihenfolge für die Anordnung der Eigenschaften ist nicht festgelegt, da die Wertarten grundsätzlich verschieden sind. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:

P.a { border-left: 2px red; border-left-style: groove; }
P.b { border-bottom: solid; border-top-width: 5px; } 

CSS Level 1 border

Die border-Eigenschaft ist die größte Zusammenfassung der Rahmeneigenschaften. Sie beschreibt die Eigenschaften der Rahmenfarbe, des Rahmenstils und der Rahmenbreite für alle vier Rahmenstücke. Als Wert kann dazu jeweils einer der Werte für diese drei Eigenschaften notiert werden. Mehrere Werte werden durch Leerzeichen getrennt; eine Reihenfolge ist nicht definiert. Beispiel:

P.a { border: 2px solid red; }
/*Alle vier Rahmen sind rot, solid und von einer 2-Pixel Breite*/

P.b { border: green 25%; border-top-color:red; }
/*Alle bis auf das oberen Rahmenstück sind grün. 
  Alle Stücke sind 25% breit.*/ 

Gratis: CSS-Kurs per E-Mail

Mit unserem CSS-Kurs wirst Du deine Website in kurzer Zeit mit CSS gesalten können.
Du erhältst von uns:

  • Schritt für Schritt Anleitungen, um CSS zu lernen
  • Tipps & Tricks, die dir die Arbeit mit CSS erleichtern
  • Aktuelle Neuerungen rund um das Thema CSS