CSS border - Rahmen für Elemente festlegen

Alle Elemente einer Website können mittels CSS mit einem Rahmen versehen werden. Man kann den Rahmen somit auf Inline- und Block-Elemente anwenden. Hierbei gibt es unterschiedliche Möglichkeiten, den Rahmen festzulegen. Die Unterscheidung erfolgt dabei über die Schlüsselwörter, die für die Festlegung der Rahmen verwendet werden. Diese sind wie folgt.

Über das Schlüsselwort für die Kurzschreibweise:

• border

Über Schlüsselwörter für die Eigenschaften:

• border-width (Breite, Dicke)
• border-style (Art des Rahmens)
• border-color (Farbe des Rahmens

Über Schlüsselwörter für die Rahmenposition und Eigenschaften:

• border-top-width (Breite der oberen Rahmenlinie)
• border-top-style (Art der oberen Rahmenlinie)
• border-top-color (Farbe der oberen Rahmenlinie)
• border-top (Kurzform für die obere Rahmenlinie mit allen drei Eigenschaften)
• border-right-width (Breite der rechten Rahmenlinie)
• border-right-style (Art der rechten Rahmenlinie)
• border-right-color (Farbe der rechten Rahmenlinie)
• border-right (Kurzform für die rechte Rahmenlinie mit allen drei Eigenschaften)
• border-bottom-width (Breite der unteren Rahmenlinie)
• border-bottom-style (Art der unteren Rahmenlinie)
• border-bottom-color (Farbe der unteren Rahmenlinie)
• border-bottom (Kurzform für die untere Rahmenlinie mit allen drei Eigenschaften)
• border-left-width (Breite der linken Rahmenlinie)
• border-left-style (Art der linken Rahmenlinie)
• border-left-color (Farbe der linken Rahmenlinie)
• border-left (Kurzform für die linke Rahmenlinie mit allen drei Eigenschaften)

In der Regel werden diese Schlüsselwörter verwendet, um einen farbigen Rahmen festzulegen. Es stehen mittlerweile aber auch weitere Möglichkeiten zur Gestaltung zur Verfügung. Diese sind wie folgt.

Für abgerundete Ecken:

• border-top-left-radius (Radius oben links)
• border-top-right-radius (Radius oben rechts)
• border-bottom-right-radius (Radius unten rechts)
• border-bottom-left-radius (Radius unten links)
• border-radius (Kurzschreibweise für Radien von allen Ecken)

Für Rahmen aus Bildern:

• border-image-source (Pfad zum Bild)
• border-image-slice: (Maße für Aufteilung des Bilds)
• border-image-width: (Rahmenbreite)
• border-image-outset: (Abstand des Rahmens zum Element)
• border-image-repeat: (Füllung der Zwischenräume)
• border-image (Kurzschreibweise für Rahmen aus Bildern)

Für einen zusätzlichen äußeren Rahmen:

• outline-width (Rahmenbreite)
• outline-style (Rahmenart)
• outline-color (Rahmenfarbe)
• outline-offset (Abstand)
• outline (Kurzschreibweise für äußeren Rahmen)

Die Unterstützung der letzten drei Eigenschaften durch die Browser ist nicht immer gegeben. Zum Teil gibt es auch Browser-Präfixe, z.B. für abgerundete Ecken, damit diese auch in älteren Browsern angezeigt werden.

Bei diesem Beispiel wird mit der Klasse .selektor für alle vier Seiten eine Rahmenbreite von 2px in der Farbe Blau zugewiesen und die Rahmenart ist eine durchgezogene Linie (solid).

Die Angabe der Rahmenbreite kann nicht nur in Pixel erfolgen. Die folgenden Werte und Einheiten sind ebenfalls möglich. Der Platzhalter <Zahl> ist durch eine Zahl zu ersetzen. In runden Klammern am Ende jeder Zeile ist die jeweilige Erläuterung.

• thin (dünn)
• medium (mittelgroß, ist Standard wenn nichts angegeben wurde)
• thick (dick)
• <Zahl>px (Pixel)
• <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
• <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
• <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
• <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
• <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
• <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
• <Zahl>vmin (der kleinere Wert von vw oder vh)
• <Zahl>vmax (der größere Wert von vw oder vh)
• <Zahl>pt (Punkt)
• <Zahl>pc (Pica)
• <Zahl>in (Inch)
• <Zahl>mm (Millimeter)
• <Zahl>cm (Zentimeter)

In der Regel verwendet man die Einheit px (Pixel) und das ist normalerweise auch ausreichend. Die Rahmenbreite ist optional und muss nicht angegeben werden. In dem Fall wird als Standardwert medium verwendet.

Die Farbe des Rahmens ist optional. Wird sie nicht angegeben, wird der Rahmen in einer Standardfarbe (Schwarz) angezeigt. Hierbei hat man mehrere Möglichkeiten, den Farbwert anzugeben.

• Über den Farbnamen, z.B. blue, red, green, yellow etc.
• Als Hexadezimalwert, z.B. #ff0000
• Als verkürzter Hexadezimalwert, z.B. #f00
• Als RGB-Wert, z.B. rgb(255,0,0)
• Als RGBa-Wert mit Alpha-Transparenz, z.B. rgba(255,0,0,0.5)
• Als HSL-Wert, z.B. hsl(0,100%,50%)
• Als HSLa-Wert mit Alpha-Tranparenz, z.B. hsla(70,100%,50%,0.5)

In dem Fall gilt als Standardbreite für den Rahmen der Wert medium und eine Standardfarbe (Schwarz).