CSS/Eigenschaften/border
Aus SELFHTML-Wiki
CSS | Eigenschaften
Die Eigenschaft border ist die Kurzschreibform für die Werte border-width, border-style und border-color. Sie bestimmt alle 4 Rahmen eines Elements.
- Erlaubte Werte
1 - 3 Angaben zu Rahmendicke, -stil und -farbe
- Vererbung steuernde Werte
inherit,initial,unsetundrevert - Standardwert
siehe Einzeleigenschaften
- anwendbar auf
alle Elemente
- Vererbung
nein
- animierbar
ja
Beispiel
Randlinien
ansehen ...
.one { border: medium solid red; } .two { border: thick dotted red; } .three { border: 1em groove red; } .four { border: 1em ridge red; } .five { border: 1em inset red; } .six { border: 1em outset red; } .seven { border-width: 1em; border-style: solid; border-color: red blue yellow green; } .eight { border: 1em double red; border-radius: 1em; } .nine { border: 1em dashed red; border-radius: 50%; } .ten { border: .5em solid red; outline: .5em solid blue; box-shadow: 0 0 0 .5em yellow inset; }
Das Beispiel enthält 10 div-Elemente, die über ihre Selektoren unterschiedliche Rahmen erhalten:
- Box 1 erhält einen
mediumbreiten festen (solid) roten Rahmen. - Box 2 hat nur einen breiten (
thick), gepunkteten Rahmen (dotted). - Box 3 -6 erhalten mit den Schlüsselwörtern
groove,ridge,insetundoutseteinen 3d-Effekt. Die Rahmenfarben werden vom Browser aus dem angegebenen Farbwert berechnet. - Box 7 zeigt, wie Sie über mehrfache Angaben der Einzeleigenschaft border-color jede Seite des Rahmens in der gewünschten Farbe darstellen können.
- Box 8 erhält mit
doubleeinen doppelten Rahmen, der mit border-radius abgerundete Ecken erhält. - Box 9 hat eine gestrichelte Linie (
dashed) und einen border-radius von 50%. - Box 10 ist ein Beispiel für mehrere Konturlinien. Dabei ist nur der rote Streifen ein Rand. Der blaue Streifen besteht aus einer Außenlinie outline, die sich außerhalb der border-box befindet (und deshalb z. B. nicht anklickbar ist). Der gelbe Rand ist ein Innenschatten, der mit box-shadow realisiert wurde.
Beachten Sie:
- Es ist durch die Angabe von
bordernicht möglich, den einzelnen Seiten verschiedene Rahmenarten zuzuweisen. - Da die Voreinstellung von border-style
noneist, sollte im Allgemeinen mindestens eine Angabe zuborder-styleerfolgen.
Empfehlung: Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge
border: width style color;.Siehe auch
- CSS/Tutorials/Boxmodell/Rahmen
- outline - anders als eine mit
bordergezeichnete Randlinie ist eine Außenlinie außerhalb des Elements
Weblinks
- Rahmen und Schatten
- Abstände
- Benutzeroberfläche
- Container
- generierter Inhalt
- Größenangaben
- Box-Ausrichtung
- Flexbox Layout
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Positionierung und Anzeige
- Scroll Snap
- Schriftformatierung
- Textformatierung
- Textausrichtung
- Umbruchsteuerung
- Transformationen
- Animationen
Abgerufen am 21.12.2025
von "http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/border"