Stil mit {stil}

Jan 2009

CSS border – Stil für die Gestaltung des Rahmens

Es ist schon hohe Kunst des Zählens, wenn border, padding und Box zusammenkommen.

Die CSS-Eigenschaft border ist eine Kurznotation, die alle Eigenschaften eines sichtbaren Rahmens um ein HTML-Element zusammenfasst.

Drei Angaben sind erforderlich, damit der Browser einen sichtbaren Rahmen rendert: Farbe, Breite und Stil des Rahmens. Wenn Eigenschaften wie border-top-style individuell deklariert werden können, müssen border-top-color und border-top-width definiert werden, damit der Rahmen vom Browser angezeigt oder »gerendert« wird.

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

div#main { border: 1px solid silver; }
                    ^    ^      ^
                    |    |      |
                    |    |      +------ border-color
                    |    +------------- border-style
                    +------------------ border-width

Die CSS-Eigenschaft 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.

Die Breite des Rahmens wird (genauso wie padding) 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

Alle Browser CSS1 Erblich: Nein

border

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

border-top | -right | -bottom | -left

Alle Browser CSS1 Erblich: Nein

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

border-top

Kurzschrift, die border-top-width, border-top-style und border-top-color in einer Regel zusammenfasst.

border-right

Kurzschrift, die border-right-width und border-right-style und border-right-color in einer Regel zusammenfasst.

border-bottom

Kurzschrift, die border-bottom-width, border-bottom-style und color in einer Regel zusammenfasst.

border-left

Kurzschrift,die border-left-width, border-left-style und border-ledt-color in einer Regel zusammenfasst.

border-style

Alle Browser CSS1 Erblich: Nein

border-style

legt den Stil aller vier Rahmenseiten fest.

Werte

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

border-color

IE4 M1 N6 O5+ S1 CSS1 Erblich: Nein

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} Sie können eine, zwei, drei oder vier Stile angeben:

• 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.

zurück zum Seitenanfang

CSS3 border