CSS border und border-block – Rahmen

border style = Farbe, Linie, Breite

Damit Eigenschaften wie border-top-style individuell deklariert werden können, müssen border-top-color und border-top-width definiert werden. Erst dann wird der Rahmen vom Browser angezeigt oder »gerendert«.

Die einfachste Form, den Rahmen eines Elements festzulegen, stellt die Kurznotation border dar:

#main { border: 1px solid silver; }
                 ▲    ▲      ▲
                 │    │      │
                 │    │      └────── border-color
                 │    └───────────── border-style
                 └────────────────── border-width

1. Farbe border-color
2. Breite border-width
3. Stil border-style

Die Reihenfolge ist beliebig, aber der Wert für border-style muss vorhanden sein, ansonsten wird der Rahmen nicht gerendert.

Die Breite des Rahmens wird (genauso wie bei CSS padding) im klassischen Box-Modell mit zur Breite des HTML-Elements gezählt – für ein pixelgenaues Layout im Webdesign ist das Rechnen mit border, padding und der Breite des Elements entscheidend.

border-block

Neben border gibt es border-block. Die border-block-Eigenschaft zieht ebenfalls Rahmen auf, allerdings nur in Schreibrichtung. Für Deutsch, Türkisch und Englisch (horizontaler Schriftlauf) entstehen ein unterer und ein oberer Rahmen, mit Sprachen, die vertikal laufen, rendern die Browsers vertikale Rahmen rechts und links.

Als Kurzschrift braucht border-box dieselben Angaben wie die Kurzschrift border.

border-block: <border-width> <border-style> <border-color>;

Der obere und untere Rahmen bzw. linke und rechte Rahmen können getrennt notiert werden.

border-block-start: 2px dotted var(--highlight); 
border-block-end: 4px dashed var(--highlight);

border

.box { border: 8px solid blue; }

border

Kurzschrift (shorthand), die border-width, border-style und border-color in einer Regel zusammenfasst.

.box { border-bottom: 4px solid mediumgray; }

border-top, border-right, border-bottom, border-left

Kurzschrift für border-top-width, border-top-style und border-top-color in einer Regel

CSS border ist nicht erblich – d.h., Elemente, die innerhalb eines Elements liegen, für das ein Rahmen vereinbart wurde, erhalten nicht automatisch ebenfalls einen Rahmen.

Allerdings kann border die Textfarbe erben: Wenn für ein Element color und border in einer Deklaration festgelegt werden, und border ohne color notiert wird.

Wird die Textfarbe geändert, zieht die Farbe für border automatisch mit. Dieses Verhalten zeigen auch outline und box-shadow.

h2 {
   color: firebrick;
   border: 8px solid;
}

border-style

border-style

legt den Stil aller vier Rahmenseiten fest.

Werte

[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4}

border-bottom: 1px dotted gray ist z.B. eine CSS-Eigenschaft, um einen Ausdruck in einem HTML abbr-Tag nach außen zu kennzeichnen.

KUCA

Die gestrichelte Linie ist ein zarter Hinweis und soll sich von text-decoration:underline unterscheiden: Beim Hovern über dem abgekürzten Begriff (HTML abbr) wird die Erklärung angezeigt.

border-color

border-color

steuert die Farbe des Rahmens an allen vier Seiten.

Werte

color {1,4} | transparent

<div style="border-color: thistle  plum  violet orchid">
                              ▲      ▲      ▲      ▲
                              │      │      │      └── border-left-color
                              │      │      └── border-bottom-color
                              │      └── border-right-color
                              └── border-top-color

{1,4} Wir können eine, zwei, drei oder vier Stile notieren:

• Ein Stil legt fest, dass alle vier Rahmenseiten in diesem Stil dargestellt werden.
• Zwei Stile legen fest, dass die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite im zweiten Stil dargestellt.
• Drei Stile legen fest, dass die obere Rahmenseite mit dem ersten, die rechte und linke Rahmenseite mit dem zweiten und die untere Rahmenseite mit dem dritten Stil dargestellt.
• Vier Stile legen die Reihenfolge top, right, bottom, left fest.

box-sizing: border-box

Mit box-sizing: border-box rechnen die Browser border und padding in die Breite der Box hinein. Das macht das Handling mit border, padding, width und height einfacher.

.box {
    border: 10px solid gray; 
    padding: 15px; 
    width: 200px;

}

.box {
    box-sizing: border-box; 
    border: 10px solid gray; 
    padding: 15px; 
    width: 200px;
}