CSS Rahmen-Eigenschaften festlegen
In CSS gibt es mehrere Möglichkeiten, um für ein Element einen Rahmen festzulegen. Eine Möglichkeit ist die Kurzschreibweise mit border. Dabei hat man den Vorteil, dass man mit einer einzigen Anweisung die Rahmenbreite, Rahmenart und Rahmenfarbe angeben kann, die für alle vier Seiten eines Elements gelten. Wenn das Verhalten gewünscht ist, dann sollte man stets die Kurzschreibweise verwenden, da man dabei Code spart und die CSS übersichtlicher gestaltet.
In manchen Fällen kann es jedoch erforderlich sein, dass die Angaben nicht pauschal für alle vier Seiten gelten, z.B. dass eine Rahmenbreite oder -farbe anders gestaltet werden muss als die übrigen. In dem Fall kann man die folgenden Eigenschaften verwenden.
- border-width (Rahmenbreite)
- border-style (Rahmenart)
- border-color (Rahmenfarbe)
Die Syntax für die Angabe aller drei Werte ist wie folgt abgebildet.
Die Eigenschaft border-style ist dabei eine Pflichtangabe. Ohne die Angabe wird kein Rahmen angezeigt. Die übrigen beiden Eigenschaften sind optional. Werden sie nicht angegeben, wird für die Rahmenbreite der Wert medium und für die Rahmenfarbe eine Standardfarbe (Schwarz) verwendet. Bei dem gezeigten Beispiel erhält das Element einen durchgehenden Rahmen mit einer Breite von 2px in der Farbe Blau. Benötigt man unterschiedliche Werte, kann man diese mit einem Leerzeichen getrennt nacheinander angeben. Dabei wird mit der oberen Rahmenlinie begonnen und im Uhrzeigersinn fortgeführt.
Analog dazu kann man für die Rahmenart unterschiedliche Werte angeben.
Für die Rahmenfarbe sind ebenfalls unterschiedliche Werte möglich.
Angabe von 3 Werten
Man kann einer Eigenschaft auch nur drei Werte zuweisen. In dem Fall gilt der 1. Wert für die obere, der 2. Wert für die linke und rechte und der 3. Wert für die untere Rahmenlinie. Ein Beispielcode.
.selektor {
border-width: 1px 2px 3px;
border-style: dashed solid dotted;
border-color: red blue green;
}Angabe von zwei Werten
Es ist auch möglich, nur zwei Werte angeben. In dem Fall gilt der 1. Wert für oben und unten, der 2. Wert für links und rechts.
.selektor {
border-width: 1px 2px;
border-style: dashed solid;
border-color: red blue;
}Die drei Eigenschaften müssen nicht immer konsistent gehalten werden. Es ist z.B. möglich, der Eigenschaft border-width zwei Werte zuzuweisen und den anderen Eigenschaften eine davon abweichende Anzahl an Werten.