Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Border – Stile für die Gestaltung des Rahmens

Eigenschaften, die die Darstellung von sichtbaren Rahmen um Elemente steuern. Jedes Blockelement kann in einem Rahmen dargestellt werden und jede Seite des Rahmens kann auf unterschiedliche Weise angelegt werden.

Das Boxmodell definiert einen inneren Rand, den Rahmen border und einen äußeren Rand um das Element.

Der innere Rand, padding, zeigt die gleiche Hintergrundfarbe wie das Element. margin, der äußere Rand, bildet den Einzug des Elements gegen den umgebenden Block. Dazwischen liegt der Rahmen, border. Die Eigenschaft border selbst ist eine Kurznotation, die mehrere Eigenschaften zusammenfasst.

Zwanzig Eigenschaften sind insgesamt für die Darstellung des Rahmens spezifiziert:

border-top-color • border-right-color • border-bottom-color • border-left-color • border-color • border-top-style • border-right-style • border-bottom-style • border-left-style • border-style • border-top-width • border-right-width • border-bottom-width • border-left-width • border-width • border-top • border-right • border-bottom • border-left • border

## border-top-color | border-right-color |
border-bottom-color | border-left-color

IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein | border-top-color notiert die Farbe des oberen Rahmens. | color
IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein | border-right-color notiert die Farbe des rechten Rahmens. | color
IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein | border-bottom-color notiert die Farbe des unteren Rahmens. | color
IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein | border-left-color notiert die Farbe des linken Rahmens. | color

color kann das Schlüsselwort für eine Farbe sein (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder ein Tripel aus drei RGB-Werten (255,255,255). Es gibt 16 Standardfarben in HTML:

aqua #00FFFF rgb(0,255,255) | gray #808080 rgb(128,128,128) | silver #C0C0C0 rgb(192,192,192) | navy #000080 rgb(0,0,128)
black #000000 rgb(0,0,0) | green #800000 rgb(128,0,0) | teal #008080 rgb(0,128,128) | olive #808000 rgb(128,128,0)
blue #0000FF rgb(0,0,255) | lime #00FF00 rgb(0,255,0) | white #FFFFFF rgb(255,255,255) | purple #800080 rgb(128,0,128)
fuchsia #FF00FF rgb(255,0,255) | maroon #800000 rgb(128,0,0) | yellow #FFFF00 rgb(255,255,0) | red #FF0000 rgb(255,0,0)

#### Beispiel

       table     { border-bottom-color: RGB(201, 94, 177); }
       body      { border-bottom-color: #E95A2B; }
       textarea  { border-bottom-color: silver; }

oder

    p.rahmen2 { border-bottom-color: red;
                border-bottom-style: double;
                border-left-color: yellow;
                border-left-style: double;
                border-right-color: blue;
                border-right-style: double;
                border-top-color: green;
                border-top-style: double;
                border-color: seagreen darkslategray teal; }

...

    <p class="rahmen2">So bunt war der Rahmen noch nie!</p>

↑

## border-color

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein | border-color steuert die Farbe des Rahmens an allen vier Seiten. | color {1,4} | transparent

Sie können eine, zwei, drei oder vier Farben angeben:

Wenn Sie eine Farbe angeben, werden alle vier Rahmenseiten in dieser Farbe dargestellt.

Wenn Sie zwei Farben angeben, werden die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite mit der zweiten Farbe dargestellt.

Wenn Sie drei Farben angeben, wird die obere Rahmenseite mit der ersten, die rechte und linke Rahmenseite mit der zweiten und die untere Rahmenseite mit der dritten Farbe dargestellt.

Wenn Sie vier Farben angeben, ist die Reihenfolge top, right, bottom, left.

color kann das Schlüsselwort für eine Farbe sein (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder die drei RGB-Werte (255,255,255). Es gibt 16 Standardfarben in HTML:

aqua #00FFFF rgb(0,255,255) | gray #808080 rgb(128,128,128) | silver #C0C0C0 rgb(192,192,192) | navy #000080 rgb(0,0,128)
black #000000 rgb(0,0,0) | green #800000 rgb(128,0,0) | teal #008080 rgb(0,128,128) | olive #808000 rgb(128,128,0)
blue #0000FF rgb(0,0,255) | lime #00FF00 rgb(0,255,0) | white #FFFFFF rgb(255,255,255) | purple #800080 rgb(128,0,128)
fuchsia #FF00FF rgb(255,0,255) | maroon #800000 rgb(128,0,0) | yellow #FFFF00 rgb(255,255,0) | red #FF0000 rgb(255,0,0)

transparent setzt den Rahmen auf nicht sichtbar. Der Rahmen besitzt zwar noch eine Breite, wird aber nicht gezeichnet.

#### Beispiel

    body      { border-color: RGB(201, 94, 177); }
    body      { border-color: #E95A2B; }
    body      { border-color: silver; }
    body      { border-color: silver ;red; }
    body      { border-color:  silver red RGB(223, 94, 77); }
    body      { border-color: silver red RGB(223, 94, 77)  black; } oder
    p.rahmen6 { border-color: red silver cyan blue;
                border-style: solid dashed dotted outset;
                border-width: 5px 10px 15px 20px; }
    ...
    <p class="rahmen6"> So  bunt war der Rahmen noch nie! </p>

↑

## border-top-style | border-right-style |
border-bottom-style | border-left-style

IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein | border-top-style legt die Darstellung der oberen Rahmenlinie fest. Viele der Linienstile werden von den meisten Browsern nicht unterstützt. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein | border-right-style legt die Darstellung der rechten Rahmenlinie fest. Viele der Linienstile werden von den meisten Browsern nicht unterstützt. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein | border-bottom-style legt die Darstellung der unteren Rahmenlinie fest. Viele der Linienstile werden von den meisten Browsern nicht unterstützt. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein | border-left-style legt die Darstellung der linken Rahmenlinie fest. Viele der Linienstile werden von den meisten Browsern nicht unterstützt. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

none ist die Voreinstellung. Durch die explizite Angabe von none wird sichergestellt, dass vorangegangene Deklarationen ausgeschaltet sind.

hidden funktioniert wie none und verhindert Konflikte, wenn verschiedene Rahmen aufeinander treffen.

dotted erzeugt eine gepunktete Linie. Viele Browser unterstützen diesen Stil nicht.

dashed erzeugt eine gestrichelte Linie. Viele Browser unterstützen diesen Stil nicht.

solid erzeugt eine durchgezogene Linie.

double erzeugt eine doppelte durchgehende Linie, die insgesamt so breit ist, wie in border-width angegeben wird.

groove erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

ridge erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

inset erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

outset erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

#### Beispiel

    body { border-bottom-style: groove; } oder
    p.rahmen3 { border-top-color: green;
                border-top-style: groove;
                border-top-width: 15px;
                border-right-color: blue;
                border-right-style:  double;
                border-right-width: 15px;
                border-bottom-color: red;
                border-bottom-style:  dashed;
                border-bottom-width: 15px;
                border-left-color: yellow;
                border-left-style:  dotted;
                border-left-width: 15px; }
    p.rahmen4 { border-top-color: green;
                border-top-style:  solid;
                border-top-width: 15px;
                border-right-color: blue;
                border-right-style: ridge;
                border-right-width: 15px;
                border-bottom-color: red;
                border-bottom-style: inset;
                border-bottom-width: 15px;
                border-left-color: yellow;
                border-left-style: outset;
                border-left-width: 15px;  } ...
    <p class="rahmen3">So bunt war der Rahmen noch nie!</p>

    <p class="rahmen4">So bunt war der Rahmen noch nie!</p>

↑

## border-style

IE4+ M1 N4+ O5 Version: CSS1 Erblich: Nein | border-style bestimmt den Stil aller vier Rahmenseiten. | [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4}

Sie können eine, zwei, drei oder vier Stile angeben:

Wenn Sie einen Stil angeben, werden alle vier Rahmenseiten in diesem Stil dargestellt.

Wenn Sie zwei Stile angeben, werden die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite im zweiten Stil dargestellt.

Wenn Sie drei Stile angeben, wird die obere Rahmenseite mit dem ersten, die rechte und linke Rahmenseite mit dem zweiten und die untere Rahmenseite mit dem dritten Stil dargestellt.

Wenn Sie vier Stile angeben, ist die Reihenfolge top, right, bottom, left.

none ist die Voreinstellung. Durch die explizite Angabe von none wird sichergestellt, dass vorangegangene Deklarationen ausgeschaltet sind.

hidden funktioniert wie none und verhindert Konflikte, wenn verschiedene Rahmen aufeinander treffen.

dotted erzeugt einen gepunktete Linie. Viele Browser unterstützen diesen Stil nicht.

dashed erzeugt eine gestrichelte Linie. Viele Browser unterstützen diesen Stil nicht.

solid erzeugt eine durchgezogene Linie.

double erzeugt eine doppelte durchgehende Linie, die insgesamt so breit ist, wie in border-width angegeben wird.

groove erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

ridge erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

inset erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

outset erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

#### Beispiel

    body      { border-style: double; }
    body      { border-style: double groove; }
    body      { border-style:  double groove dashed; }
    body      { border-style: double groove none solid; } oder
    p.rahmen6 { border-color: red silver cyan blue;
                border-style: solid dashed dotted outset;
                border-width: 5px 10px 15px 20px; }
    ...

    <p class="rahmen6"> So  bunt war der Rahmen noch nie!</p>

↑

## border-top-width | border-right-width |
border-bottom-width | border-left-width

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | border-top-width legt die Breite des oberen Rahmens fest. | thin | medium | thick | length
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | border-right-width legt die Breite des rechten Rahmens fest. | thin | medium | thick | length
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | border-bottom-width legt die Breite des unteren Rahmens fest. | thin | medium | thick | length
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | border-left-width legt die Breite des linken Rahmens fest. | thin | medium | thick | length

thin | medium | thick sind Schlüsselwörter, mit denen die Breite der Rahmenlinie gesetzt wird. Plattform und Browser entscheiden aber über deren exakte Breite. Die Voreinstellung ist medium.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

#### Beispiel

    body      { border-bottom-width: thick; }
    body      { border-bottom-width: 0.25in; }
    body      { border-bottom-width: 5mm; }

oder

    p.rahmen5 { border-bottom-color: red;
                border-bottom-style:  double;
                border-bottom-width: 15px;
                border-left-color: yellow;
                border-left-style:  double;
                border-left-width: 10px;
                border-right-color: blue;
                border-right-style:  double;
                border-right-width: 5px;
                border-top-color: green;
                border-top-style: double;
                border-top-width: 2px;}
    ...
    <p class="rahmen5">So bunt war der  Rahmen noch nie!</p>

↑

## border-width

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | border-width setzt die Breite aller vier Rahmenseiten in einer einzigen Deklaration. | [ ,thin | medium | thick | length ] {1,4}

Sie können eine, zwei, drei oder vier Breiten angeben:

Wenn Sie eine Breite angeben, werden alle vier Rahmenseiten in dieser Breite dargestellt.

Wenn Sie zwei Breiten angeben, werden die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite mit der zweiten Breite dargestellt.

Wenn Sie drei Breiten angeben, wird die obere Rahmenseite mit der ersten, die rechte und linke Rahmenseite mit der zweiten und die untere Rahmenseite mit der dritten Breite dargestellt.

Wenn Sie vier Breiten angeben, ist die Reihenfolge top, right, bottom, left.

thin | medium | thick sind Schlüsselwörter für die Rahmenbreite. Plattform und Browser bestimmen die exakte Breite der Rahmenseiten. Die Voreinstellung ist medium.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

#### Beispiel

    body { border-width: thick; }
    body { border-width: 0.25in; }
    body { border-width: 5mm; }

oder

    p.rahmen6 { border-color: red silver cyan blue;
    border-style: solid dashed dotted outset;
    border-width: 5px 10px 15px 20px; }
    ...
     <p class="rahmen6"> So bunt war der Rahmen noch nie! </p>

↑

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

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein | border-top ist eine Abkürzung, mit der die Eigenschaften border-top-width und/oder border-style und/oder color in einer Deklaration notiert werden können. | border-top-width &| border-style &| color
IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein | border-right ist eine Abkürzung, mit der die Eigenschaften border-right-width und/oder border-style und/oder color in einer Deklaration notiert werden können. | border-right-width &| border-style &| color
IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein | border-bottom ist eine Abkürzung, mit der die Eigenschaften border-bottom-width und/oder border-style und/oder color in einer Deklaration notiert werden können. | border-bottom-width &| border-style &| color
IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein | border-left ist eine Abkürzung, mit der die Eigenschaften border-left-width und/oder border-style und/oder color in einer Deklaration notiert werden können. | border-left-width &| border-style &| color

#### Beispiel

    body      { border-bottom: thick dashed yellow; }
    body      { border-left: 23px double yellow; }
    body      { border-right: dotted gray; }

oder

    p.rahmen { border-bottom: 25px solid red;
               border-left: 25px solid yellow;
               border-right: 25px solid blue;
               border-top: 25px solid green; }

...

    <p class="rahmen">So bunt war der Rahmen noch nie!</p>

↑

## border

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | border fasst alle individuellen Stylesheet-Eigenschaften des Rahmens zusammen. | border-width &| border-style &| border

#### Beispiel

    body          { border: thick dashed yellow; }
    p             { border: thick double yellow; }
    blockquote    { border: dotted gray; } oder
    p.rahmen_dick { border: goldenrod solid;
                    width: 300px;
                    padding: 10px;
                    background-color: khaki;
                    border-width: 15px 2px 25px}
    ...

    <p class="rahmen_dick"> Noch  nie war der Rahmen so bunt!</p>

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen