CSS border-[top|right|bottom|left]

stylesheet.css · border-[top|right|bottom|left]

.probe {
  border-top: 4px solid #7A2FB0;
}

Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.

berechneter Wertborder-top: 4px solid #7A2FB0

Box-Breite–

Box-Höhe–

Erläuterungen

Die Eigenschaften border-top, border-right, border-bottom und border-left sind Kurzschrift- Eigenschaften. Mit ihnen ist es möglich, die Regeln für border-width, border-style und border-color jeweils für eine Seite eines Elements in einer Regel zu vereinigen.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'border-top', 'border-right', 'border-bottom', 'border-left'
[ <border-width> || <border-style> || <border-top-color> ] | inherit

Tipps:

Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.

Wer Text oder Überschriften unterstreichen möchte, ist dazu nicht auf die Eigenschaft text-decoration angewiesen. Derselbe Effekt lässt sich auch durch border-bottom erzielen, zudem bieten Rahmen eine ungleich größere Flexibilität. Man sollte dabei aber auch die Zeilenhöhe etwas vergrößern, um Platz für den Rahmen (und evtl. padding) zu schaffen, denn der Zeilenabstand wird nicht automatisch angepasst.

<border-[top|right|bottom|left]-color>: Farbe des Elementrahmens; Ist die Farbe des Rahmens einer Seite nicht explizit gegeben, wird die Farbe des Rahmens an der Oberseite des Elementes verwendet. Ist auch diese nicht gegeben, wird die Farbe des Textes angenommen.
<border-[top|right|bottom|left]-style>: Linienart des Elementrahmens; Falls die Linienart nicht deklariert ist, wird auf der entsprechenden Seite kein Rahmen gezeichnet.
<border-[top|right|bottom|left]-width>: Linienbreite des Elementrahmens; Ist die Strichbreite nicht definiert, wird der Wert middle angenommen, vorausgesetzt, dass ein border-style definiert ist.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

P.attention { border-right:double red; }

Browserunterstützung

: Die Eigenschaften border-top, border-right, border-bottom und border-left werden von allen modernen Browsern unterstützt, auf Einschränkungen wird bei den Einzeleigenschaften hingewiesen.

Eric Meyer's CSS2 Test Suite: border-top, border-right, border-bottom, border-left.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

Vier Kurzschriften neben einer

Der Rahmen eines Elements lässt sich auf drei Wegen ansprechen, und die Seiten dieser Referenz beschreiben alle drei: die Sammelkurzschrift für alle vier Seiten, die hier behandelten vier Kurzschriften für je eine Seite, und die Längsformen für Breite, Muster und Farbe.

Die vier hier sind die praktischsten, sobald nicht alle Seiten gleich aussehen sollen. Ein Rahmen nur unten, wie er für Überschriften und Tabellenzeilen üblich ist, ist eine Zeile; über die Längsformen wären es drei, über die Sammelkurzschrift eine Zeile plus drei Rücknahmen.

Wie jede Kurzschrift setzen sie auch das, was nicht dasteht. border-bottom: 1px setzt das Muster auf none zurück, und damit ist gar kein Rahmen zu sehen: die Breite allein genügt nicht, das Muster ist die Voraussetzung.

Reihenfolge und Zusammenspiel

Innerhalb einer dieser Kurzschriften ist die Reihenfolge der drei Werte beliebig, weil sich Breite, Muster und Farbe an ihrer Form unterscheiden lassen. Zwischen den Regeln entscheidet dagegen die Reihenfolge im Stylesheet.

Daraus ergibt sich das übliche Muster: zuerst die Sammelkurzschrift für alle vier Seiten, danach die Ausnahme für eine Seite. Umgekehrt notiert wäre die Ausnahme wieder gelöscht. Dasselbe gilt für die verbreitete Schreibweise, einen Rahmen ringsum zu setzen und eine Seite mit border-bottom: none wieder zu entfernen.

Zu beachten ist außerdem, dass die Rahmenbreite in die Größe der Box eingeht. Ein Rahmen, der nur im Zeigezustand erscheint, verschiebt das Layout, sobald er hinzukommt. Der übliche Ausweg besteht darin, den Rahmen von Anfang an zu setzen und nur seine Farbe zu wechseln.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Einige Mobilgeräte verringern Rahmenstärken im Stylesheet, um die Darstellung an Kleindisplays zu 'optimieren'. Innerhalb von Text werden Rahmen oft ganz unterdrückt. Größere Abstände an Block- Level- Elementen sind in der Darstellung vielfach bis auf wenige Pixel verringert. Deshalb sollte man für border-width keine absoluten Werte, sondern relative Größen angeben. Dadurch sind sie automatisch an die unterschiedlichen Ausmaße der Displays angepasst.

Die Displays vieler Kleingeräte können Farben bis maximal 65K darstellen und sind kontrastärmer als PC-Bildschirme.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: Siehe bei den individuellen Eigenschaften
Berechneter Wert: Siehe bei den individuellen Eigenschaften
Vererbung: Nein
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft border-[top|right|bottom|left]