Programmiersprachen sind nicht immer einfach zu verstehen. Doch wenn man einmal die einzelnen Befehle und Arten kennt, kann das viele Vorteile mit sich bringen. Genauso verhält es sich mit dem Codierungsbefehl CSS border. Aber worum handelt es sich dabei? Wofür wird es verwendet? Und was kann man damit machen?

Was ist ein CSS border?

CCS border ist eine Kurzschrift – auch shorthand – , mit dem man einen Rahmen um ein beliebiges HTML-Element ziehen und steuern kann. Daher ermöglicht es dieser Befehl, Anzeige von bestimmten Elementen auf einer Webseite zu gestalten – vor allem den Rahmen samt all seiner Eigenschaften.

Wie wird es verwendet?

Standardmäßig werden alle HTML-Elemente inline angezeigt, das heißt, sie werden alle in einer einzigen Zeile nebeneinander platziert. Mithilfe der CSS-Kurzschrift border kann man die Anzeige des Rahmens um ein Element nun steuern.

„border“ ist ein englischer Begriff. Im Deutschen übersetzt bedeutet er „Rahmen“. Das spiegelt sich in seiner Funktionsweise wieder: Der Befehl CSS border wird typischer Weise genutzt, um einen benutzerdefinierten Rahmen um ein Element zu erstellen auf einer Webseite zu legen.

Dieser kann auf verschiedenste Weise beeinflusst werden.

• Man kann die Farbe eines Rahmens mithilfe des Befehls „border-color“ steuern
• Auswirkungen hat der Befehl „border-width“ auf die Breite des Rahmens
• Beeinflusst wird der Stil eines Rahmens durch den Befehl „border-style“

Alle drei Aspekte – Farbe, Breite und Stil des Rahmens – werden im Code innerhalb eines Codeabschnittes gemeinsam angegeben.

Wichtig: Mit der abgekürzten Eigenschaft border- kann bei allen drei Eigenschaften in einer Deklaration festgelegt werden, welche Farbe, welche Breite und welchen Stil der Rahmen haben soll.

border-color

Die CSS-Eigenschaft border-color kann als Hex-Wert, als RGB-Wert oder Farbname im Code angegeben werden.

Im folgenden Beispiel wird gezeigt, wie ein schwarzer Rahmen für ein HTML Element festgelegt werden kann:

div { 
border-style: solid; 
border-width: 1px; 
border-color: #000; 
}

Wenn Du für jede Seite (links, rechts, oben und unten) des Rahmens eine andere Farbe festlegen möchtest, kannst Du die folgenden Befehle dafür verwenden:

border-top-color
border-right-color
border-bottom-color
border-left-color

Die folgende CSS-Codeeingabe würde beispielsweise einen gelben Rand oben und unten am Element und einen grünen Rand links und rechts erstellen:

div { 
border-style: solid; 
border-width: 1px; 
border-top-color: #ff0; 
border-right-color: #0f0; 
border-bottom-color: #ff0; 
border-left-color: #0f0; 
}

border-width

Die CSS-Eigenschaft border-width verwendet man, um die Breite des Rahmens eines Elements anzugeben. Die Breite kann als spezifischer Wert oder durch Verwendung eines der drei vordefinierten Werte eingestellt: thin (dünn), medium (mittel) und thick (dick).

In den meisten Fällen wird die Breite des Rahmens eines Elements durch die Breite des Elements selbst bestimmt. Wenn die Eigenschaft border-width jedoch auf einen anderen Wert als den Standardwert gesetzt ist, entspricht die Rahmenbreite des Elements dem angegebenen Wert.

Die Werte selbst werden in Pixel (px), Ems (em) oder Prozent (pt) angegeben und entsprechend in den Code eingefügt. Wenn Du also zum Beispiel einen 10 Pixel breiten Rahmen erstellen auf Deiner Webseite erstellen willst, würdest Du den folgenden CSS-Code verwenden: „border: 10px;“

border-style

Die Dicke des Rahmens eines Elements kann auch mit der Eigenschaft border-style angegeben werden. border-style beeinflusst im Allgemeinen den Rahmenstil eines Elementes. Es gibt vier verschiedene Werte, die man hinsichtlich des Stils angeben kann:

• solid (fest) – der Standardwert. Die Grenze ist eine durchgängige Linie.
• dotted (gepunktet) – Der Rahmen besteht aus einer Reihe von Punkten.
• dashed (gestrichelt) – Die Umrandung besteht aus einer Reihe kurzer Linien.
• double (doppelt) – Der Rand besteht aus zwei durchgängigen Linien.

Auch in diesem Fall ist es möglich, zu spezifizieren, welche Seite (oben, unten, links, rechts) einen stimmten Rahmenstil erhalten soll. Die entsprechenden Kurzschriften dazu lauten:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Ein Beispiel könnte wie folgt aussehen:

border-top-style: dashed; 
border-right-style: solid; 
border-bottom-style: dotted; 
border-left-style: double;

Hierbei ist der Rahmen: an der Oberseite gestrichelt, rechts einmalig durchgängig, an der Unterseite gepunktet und links zweifach durchgezogen.

Wenn Du ein Element ohne Rahmen erstellen willst, kannst Du das ebenfalls angeben. Hierbei setzt Du die Eigenschaft border-style auf none: „border-style: none;“

Weitere Werte, die Du nutzen kannst, um den Rahmenstil eins Elementes zu beeinflussen, wären:

• border: hidden – zur Erstellung eines „unsichtbaren“ Rahmens; unsichtbarer Rahmen kann für Elemente nützlich sein, die voneinander getrennt werden sollen (z.B. Schaltflächen in einer Symbolleiste); kann auch verwendet werden, um ein „Abstands“-Element zu erstellen
• border: groove – wird verwendet, um eine Vertiefung um den Rahmen zu erzeugen
• border: ridge – ähnelt border:groove, aber mit dem Unterschied, dass ein erhöhter Rahmen erzeugt wird; wird am besten verwendet, um ein Element auf einer Seite hervorzuheben
• border: inset – gibt an, dass der Rahmen ein nach innen gerichteter Rahmen sein soll
• border: outset – beschreibt einen nach außen gerichteten Rahmen

Zusammengefasst

Mit der Kurzschrift CSS border bist Du in der Lage, ohne Probleme die Eigenschaften eines Rahmens um ein HTML-Element Deiner Wahl nach Belieben zu ändern. Dieser Befehl ist daher ein wichtiger Bestandteil in Webdesign und Programmiersprache.

Welche Eigenschaften kann man hinsichtlich des Rahmens beeinflussen? Darunter fällt die Farbe, die Breite und der Stil des Rahmens. Hierbei kannst Du einzelne Seiten individuell oder den gesamten Rahmen verändern. Wichtig ist, dass die die Eingabe mit allen Eigenschaften zusammen tätigst. So wird das Programmieren einfach – ob auf Laptop oder Computer.

FAQ zu CSS border