nach oben gehen
von: Steffen Domaschke - veröffentlicht: 20.08.2021
Webseiten Netz
css3-logo

CSS lernen - den Rahmen (Border) eines Elements festlegen

In diesem Tutorial lernen Sie, wie Sie mit CSS einen Rahmen (Border) um ein Element definieren.

Webseiten Netz

CSS Rahmen (Border) Eigenschaften

Mit den border-Eigenschaften können Sie den Rahmenbereich eines Elements definieren.

Der Rahmen erscheint direkt zwischen dem Padding- und Marginbereich. Der Rahmen kann entweder ein vordefinierter Stil wie zum Beispiel eine durchgezogene Linie, eine gepunktete Linie, Doppellinien oder sogar ein Bild sein.

Im folgenden Abschnitt wird beschrieben, wie Sie Stil, Farbe und Breite des Rahmens festlegen.

Die verschiedenen Stile der Rahmen (Border)

Die border-style-Eigenschaft legt den Stil des Rahmens einer Box fest. Dabei hat man verschiedene Werte wie z.B. solid oder dotted usw. zur Verfügung.

Sie besitzt wie auch andere CSS-Eigenschaften eine Kurzschreibweise. Dies hilft Ihnen dabei, Zeit zu sparen, da Sie zusätzliche Eingaben vermeiden und der CSS-Code einfacher zu lesen ist, falls später Anpassungen erfolgen sollen.

Die border-style-Eigenschaft kann die folgenden Werte haben: none, hidden, solid, dashed, dotted, double, inset, outset, groove und ridge. Schauen Sie sich die folgende Abbildung an, die Ihnen einen Eindruck von den Unterschieden zwischen den Rahmenstiltypen vermittelt.

solid, dotted, dashed, double, inset, outset, groove, ridge, border-style

Die Werte none und hidden zeigen keinen Rahmen an, es gibt jedoch einen kleinen Unterschied zwischen diesen beiden Werten. So hat beim Zusammenklappen (Collapse) von Tabellenzellen und Rahmen der none-Wert die niedrigste Priorität, während der hidden-Wert die höchste Priorität hat. Dies ist zum Beispiel wichtig, wenn es zwei verschiedene im Konflikt stehenden Deklarationen gibt

Die Werte inset, outset, groove und ridge erzeugen einen 3D-ähnlichen Effekt, der im Wesentlichen vom border-color-Wert abhängt.

Dies wird normalerweise erreicht, indem ein "Schatten" aus zwei Farben erstellt wird, die etwas heller bzw. dunkler als die Border-Color sind. Die Helligkeit bzw. der Farbwert der zweiten Farbe ist nicht anpassbar.

Hinweis: Der Standard-Stil von border-style ist none. Sie müssen also einen Border-Style angeben, damit der Rahmen um ein Element herum angezeigt wird Die Standardbreite oder -stärke von border ist medium, und die Standardfarbe des Rahmens entspricht der Textfarbe des Elements.

Einstellen der Rahmenbreite (border-width)

Die border-width-Eigenschaft gibt die Breite des Rahmens (Border) an. Sie wird in Kurzschreibweise geschrieben, damit man gleichzeitige die Dicke aller vier Seiten des Elementrahmens definieren kann.

div {
    border-style: dashed;
    border-width: 10px;
}

Tipp: Die Rahmenbreite kann mit einem beliebigen Längenwert wie z.B. px, em, rem usw. angegeben werden. Neben Längeneinheiten kann die Rahmenbreite auch mit einem von drei Schlüsselwörtern angegeben werden: thin, medium und thick. Prozentwerte sind nicht zulässig.

Festlegen der Rahmenfarbe (border-color)

Wie es schon vermuten lässt, kann mit der border-color-Eigenschaft die Farbe des Rahmens eingestellt werden. Auch hier kann man über die Kurzschreibweise die Farbe aller vier Seiten gleichzeitig definieren. Folgendes Beispiel gibt einem Absatz einen roten Rahmen:

p {
    border-style: solid;
    border-color: #ff0000;
}

Hinweis: border-width und border-color funktioniert nicht, wenn Sie alleine verwendet werden. Verwenden Sie border-style, um zuerst den Stil des Rahmens festzulegen.

Kurzschreibweise für Border

Die border-Eigenschaft fasst alle Border-Styles in eine einzelne Regel. Es fasst also border-width, border-style, border-color zusammen.

p {
  border: 5px solid #00ff00;
}

Wenn der Wert für eine einzelne border-Eigenschaft weggelassen wird, wird stattdessen der Standardwert (insofern vorhanden) für diese Eigenschaft verwendet. Wenn beispielsweise der Wert für die border-color beim Setzen des Rahmens fehlt oder nicht angegeben wurde, wird die color-Eigenschaft des Elements als Wert für die Rahmenfarbe verwendet. Im folgenden Beispiel ist der Rahmen eine durchgehende rote Linie mit einer Breite von 5 Pixeln:

p {
    color: red;
    border: 5px solid;
}

Lassen wir aber den Wert solid weg, so wird kein Rahmen angezeigt. Ursache ist dabei, dass der Standard-Wert von border-style wie oben beschrieben none ist.

p {
    border: 5px #00ff00;
}
Internetagentur SEO Lausitz Webdesign, Webseiten erstellen, Betreuung und Wartung von Webseiten, WP Support Anonym hat 5,00 von 5 Sternen 13 Bewertungen auf ProvenExpert.com

Kontaktieren Sie uns - wir sind gern für Sie da!

css, webdesign, css3, css tutorial, css border, css lernen, webdesign