Rahmen / Border

Ein wichtiger Teil vieler Elemente und auch von dem Boxmodell ist der Rahmen ("border").

Der Eigenschaften von "border" umfassen die Stärke, den Typ und die Farbe. Die Deklaration wird auch in der Reihenfolge aufgebaut:

Einfachen Rahmen definieren


h2 {
 border: 5px solid coral;
}

Der "border" um das Element <h2> hat nun eine "5" Pixel Starke, "durchgehende" und "coralfarbene" Linie.

Der Rahmen kann nicht nur in der Stärke oder in der Farbe verändert werden. In CSS stehen noch diverse Rahmentypen zur Verfügung, die aber auch von verschiedenen Browsern etwas abgewandelt dargestellt werden können.

Typen von border

double = doppelter Rahmen
dotted = gepunkteter Rahmen
dashed = Strichlinie
groove = 3D-Effekt (Browserspezifische Darstellung)
ridge = 3D-Effekt (Browserspezifische Darstellung)
inset = 3D-Effekt (Browserspezifische Darstellung)
outset = 3D-Effekt (Browserspezifische Darstellung)

Mit der Eigenschaft "outline" kann eine zusätzliche Außenlinie um den "border" gezogen werden.

Zusätzlichen äusseren Rahmen definieren


h2 {
 border: 5px solid coral;
 outline: 3px dashed black;
}

Um die Ecken etwas abzurunden, können wir auf die Eigenschaft "border-radius" zugreifen.

Abgerundete Ecken vom Rahmen definieren


h2 {
 border: 5px solid coral;
 border-radius: 15px;
}

Der Rahmen kann auch in jede Richtung individuelle Werte annehmen.

Individuelle Rahmen


h2 {
 border-top: 5px solid coral;
 border-right: 4px dashed green;
 border-bottom: 3px double blue;
 border-left: 2px dotted red;
}

Weiter mit Abstände