SELFHTML: Stylesheets / CSS-Eigenschaften / Rahmen
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche CSS-Eigenschaften es gibt, um Rahmen für Elemente zu erzeugen.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, CSS-Eigenschaften, Rahmen, Schmuckrahmen, Einrahmung, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-top-style, border-left-style, border-right-style, border-bottom-style, border-style, border-left-color, border-top-color, border-right-color, border-color, border
Date: 2005-11-12T14:12:32+01:00

| # Rahmen
| Allgemeines zu Rahmen border[-top, -right, -bottom, -left]-width (Rahmendicke) border[-top, -right, -bottom, -left]-color (Rahmenfarbe) border[-top, -right, -bottom, -left]-style (Rahmentyp) border[-top, -right, -bottom, -left] (Rahmen allgemein) outline-width (Rahmendicke) outline-color (Rahmenfarbe) outline-style (Rahmentyp) outline (Rahmen allgemein)

## Allgemeines zu Rahmen

Es gibt in CSS zwei Arten von Rahmen: Die erste Sorte läuft unter der Bezeichnung `border` und zeichnet immer rechteckige Rahmen um die Elemente. `border` ist schon seit CSS1 im Standard vertreten und wird von allen Browsern verstanden. Außerdem gibt es `outline`, welche erst seit CSS2 existiert und noch nicht von allen Browsern verstanden wird, obwohl diese Rahmenart andere und durchaus sinnvolle Eigenschaften hat.

### Allgemeines zu `border`

Sinnvoll sind die hier beschriebenen Angaben für `border` besonders für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für `h[1-6]`, `p`, `blockquote`, `address`, `pre` sowie `div` oder `table`. Anwendbar sind sie aber auf alle Elemente. So ist es beispielsweise möglich, in HTML eine blinde Tabelle zu notieren, in der aber doch einzelne Zellen einen Rahmen nach Wunsch erhalten - nämlich mit Hilfe von CSS-Rahmeneigenschaften. Auch auf `html` und `body` lassen sich die hier aufgelisteten Eigenschaften anwenden - in diesem Fall wird um den gesamten sichtbaren Körper einer HTML-Datei ein Rahmen gezeichnet.

Wenn Sie bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.

In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. So ist es sinnvoll, nicht nur eine Rahmendicke anzugeben, sondern auch die gewünschte Rahmenfarbe. Auch verschiedene Rahmentypen stehen zur Auswahl. Alle Rahmeneigenschaften können Sie wahlweise auf alle vier Seiten eines Elements anwenden, aber auch nur auf eine oder mehrere bestimmte Seiten.

### Beachten Sie:

Der Internet Explorer vor Version 5.5 zeichnet Rahmen nur um Blocklevel-Elemente.

### Allgemeines zu `outline`

Die Eigenschaft `outline` orientiert sich, im Gegensatz zu `border` nicht an rechteckigen Blöcken, sondern ist explizit als "Rahmen für nicht-rechteckige Bereiche" definiert. Außerdem wird die Dicke der `outline` nicht zur Elementgröße hinzugerechnet, sondern als letzter Schritt "draufgemalt", ohne Platz wegzunehmen. Im Gegensatz zu den `border`-Rahmen können `outline`-Rahmen aber nur vollständig geschlossen zugewiesen werden, es fehlt die Möglichkeit, einzeln für oben, unten, links oder rechts separate Angaben zu machen. Vergleichen Sie am Besten die Beispiele zu `outline` und `border`, um den Unterschied zu verstehen.

## border[-top, -right, -bottom, -left]-width (Rahmendicke)

Sie können für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Rahmenfarbe.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>border-width</title>
    <style type="text/css">
    #links {
      border-left-width:2.5em;
      border-left-style:solid;
      border-color:red;
      padding-left:2.5em;
      text-align:justify;
    }

    #linksrechts {
      border-left-width:2.5em;
      border-left-style:solid;
      border-left-color:red;
      padding-left:2.5em;
      border-right-width:2.5em;
      border-right-style:solid;
      border-right-color:green;
      padding-right:2.5em;
      text-align:justify;
    }

    #rundrum {
      border-width:1px;
      border-style:solid;
      border-color:blue;
      padding:2.5em;
      text-align:justify;
    }
    </style>
    </head><body>

    <p id="links">xxxxx xxxxx xxxxx usw.</p>
    <p id="linksrechts">xxxxx xxxxx xxxxx usw.</p>
    <p id="rundrum">xxxxx xxxxx xxxxx usw.</p>

    </body></html>

### Erläuterung:

Mit `border-width:` können Sie die Dicke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:

`thin` = dünn.
`medium` = mittelstark.
`thick` = dick.

Um für einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei `border-width` mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: `border-width:5px 5px;`
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet die Rahmendicke für oben und unten, die zweite Angabe die Rahmendicke für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts und links und die dritte die Rahmendicke für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts, die dritte die Rahmendicke für unten und die vierte die Rahmendicke für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von `border-width` zu verwenden:
`border-top-width` definiert die Rahmendicke für oben,
`border-right-width` die Rahmendicke für rechts,
`border-bottom-width` die Rahmendicke für unten und
`border-left-width` die Rahmendicke für links.

### Beachten Sie:

Die Angabe `border-width` wird nur interpretiert, wenn außerdem der Rahmentyp (`border-style`) angegeben wird, also etwa:
`<p style="border-style:solid; border-width:thin">`.

## border[-top, -right, -bottom, -left]-color (Rahmenfarbe)

Sie können für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Rahmentyp und/oder einer Angabe zur Rahmendicke kombinieren.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>border-color</title>
    </head><body>

    <p style="border-color:#FFFF00; border-width:2px; border-style:solid; padding:4px">
    xxxxx xxxxx xxxxx usw.</p>

    <p style="border-top-color:#FF00FF; border-left-color:#00FF00;
    border-right-color:#3333FF; border-bottom-color:#FFFF00; border-width:4px;
    border-style:solid; padding:8px">
    xxxxx xxxxx xxxxx usw.</p>

    <p style="border-color:cyan yellow; border-width:8px; border-style:solid; padding:16px">
    xxxxx xxxxx xxxxx usw.</p>

    </body></html>

### Erläuterung:

Mit `border-color:` können Sie die Rahmenfarbe bestimmen. Erlaubt ist eine Farbangabe oder der Wert `transparent` (durchsichtiger Rahmen, interessant bei sich überlappenden Elementen, wie z.B. durch Positionierung möglich).

Um für einzelne Seiten des Elements eine unterschiedliche Rahmenfarbe zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei `border-color` mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: `border-color:#FFFF00 red;`
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben und unten, die zweite Angabe die Rahmenfarbe für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts und links und die dritte die Rahmenfarbe für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts, die dritte die Rahmenfarbe für unten und die vierte die Rahmenfarbe für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von `border-color` zu verwenden:
`border-top-color` definiert die Rahmenfarbe für oben,
`border-right-color` die Rahmenfarbe für rechts,
`border-bottom-color` die Rahmenfarbe für unten und
`border-left-color` die Rahmenfarbe für links.
Die Untereigenschaften von `border-color` stehen im Gegensatz zu den Untereigenschaften von `border-width` jedoch erst seit CSS2 zur Verfügung und werden von älteren Browsern ignoriert.

### Beachten Sie:

Die Angabe `border-color` wird nur interpretiert, wenn außerdem der Rahmentyp (`border-style`) angegeben wird, also etwa:
`<p style="border-style:solid; border-color:red">`.

Netscape 4.x hat mit Angaben zur Rahmenfarbe zum Teil erhebliche Probleme und interpretiert teilweise augenscheinlich unsinniges Zeug. Das obige Beispiel etwa lässt ihn böse straucheln.

## border[-top, -right, -bottom, -left]-style (Rahmentyp)

Mit dem Rahmentyp können Sie verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur Rahmenfarbe.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>border-style</title>
    </head><body>

    <p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;">
    Textabsatz mit Rahmendicke medium und Typ dotted.</p>
    <p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;">
    Textabsatz mit Rahmendicke medium und Typ dashed.</p>
    <p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;">
    Textabsatz mit Rahmendicke medium und Typ solid.</p>
    <p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
    Textabsatz mit Rahmendicke medium und Typ double.</p>
    <p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;">
    Textabsatz mit Rahmendicke 12px und Typ groove.</p>
    <p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;">
    Textabsatz mit Rahmendicke 12px und Typ ridge.</p>
    <p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;">
    Textabsatz mit Rahmendicke 12px und Typ inset.</p>
    <p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;">
    Textabsatz mit Rahmendicke 12px und Typ outset.</p>

    </body></html>

### Erläuterung:

Mit `border-style:` können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben.

`none` = kein Rahmen (bzw. unsichtbarer Rahmen).
`hidden` = kein Rahmen (bzw. unsichtbarer Rahmen), siehe Hinweis.
`dotted` = gepunktet.
`dashed` = gestrichelt.
`solid` = durchgezogen.
`double` = doppelt durchgezogen.
`groove` = 3D-Effekt.
`ridge` = 3D-Effekt.
`inset` = 3D-Effekt.
`outset` = 3D-Effekt.

Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei `border-style` mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: `border-style:solid double;`
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für rechts und links.
Drei Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts und links und die dritte den Rahmentyp für unten.
Vier Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts, die dritte den Rahmentyp für unten und die vierte den Rahmentyp für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von `border-style` zu verwenden:
`border-top-style` definiert den Rahmentyp für oben,
`border-right-style` den Rahmentyp für rechts,
`border-bottom-style` den Rahmentyp für unten und
`border-left-style` den Rahmentyp für links.
Die Untereigenschaften von `border-style` stehen im Gegensatz zu den Untereigenschaften von `border-width` jedoch erst seit CSS2 zur Verfügung und werden von älteren Browsern ignoriert.

### Beachten Sie:

Die Angabe `hidden` ist vor allem für benachbarte Tabellenzellen gedacht. Während die Angabe `none` nur den Rahmen des Elements unterdrückt, für das sie gilt, bewirkt `hidden`, dass auch Rahmen von Nachbarelementen unterdrückt werden, sofern diese Rahmen besitzen. Voraussetzung dafür ist allerdings, dass für das zugehörige `table`-Element die folgende CSS-Sondereigenschaft notiert ist:
`border-collapse:collapse`
Dies ist eine neuere CSS-Eigenschaft, die Rahmenregeln für Tabellen erlaubt. Beim Wert `collapse` fallen alle Rahmen der Zellen sauber übereinander, sprich, eine Zelle mit rechtem Rand von 1px und eine Zelle rechts davon mit einem linken Rand von 1px bilden einen gemeinsamen Rahmen von 1px. Der gegenteilige mögliche Wert, der allerdings auch der Voreinstellung entspricht, lautet `separate`. Damit "stoßen" die Rahmen benachbarter Zellen nur aneinander, überlappen sich aber nicht. Im Beispiel der zwei erwähnten Zellen würde also optisch ein Zwischenrahmen von 2px Dicke entstehen.

Netscape 4.x interpretiert `border-style` nicht vollständig und auch nur, wenn außerdem die eine Angabe zur Rahmendicke notiert wird, also etwa:
`<p style="border-style:solid; border-width:thin">`.

Einige der Effekte (z.B. `groove`) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.

## border[-top, -right, -bottom, -left] (Rahmen)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-width
border-style
border-color

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>border</title>
    <style type="text/css">
    h1 { border-bottom:4px double blue; padding-bottom:4px; margin:0px; }
    h2 { border-top:1px solid blue; margin:0px; }
    p { line-height:150%; }
    p.info { border:1px solid gray; background-color:#E0E0E0; padding:4px; margin:0px; }
    span.rahmen { border:2px solid red; }
    body { font-family:Tahoma,Helvetica,sans-serif; }
    </style>
    </head><body>

    <h1>&Uuml;berschrift erster Ordnung</h1>

    <p>xxxxx xxxxx usw... <span class="rahmen">xxxxx xxxxx xxxxx usw...</span> xxxxx
    xxxxx</p>

    <h2>&Uuml;berschrift zweiter Ordnung</h2>

    <p>xxxxx xxxxx xxxxx usw.</p>

    <p class="info">xxxxx xxxxx xxxxx usw.</p>

    </body></html>

### Erläuterung:

Mit `border:` können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den Beispielen oben. Die Reihenfolge der Einzelangaben ist egal.

Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen. Dazu sind die Untereigenschaften von `border` gedacht:
`border-top` definiert eine zusammenhängende Angabe für oben,
`border-right` für rechts,
`border-bottom` für unten und
`border-left` für links.

## outline-width (Rahmendicke)

Die Angabe der `outline-width` ist identisch zur `border-width`. Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:

`thin` = dünn.
`medium` = mittelstark.
`thick` = dick.

Kombinieren Sie `outline-width` stets mit einer Angabe für `outline-style`, um eine sichtbare Rahmenlinie zu definieren.

## outline-color (Rahmenfarbe)

Die Angabe von `outline-color` ist nahezu identisch zu `border-color`. Erlaubt ist eine Farbangabe oder der Wert `invert` (invertierte Farbe, die durch Umkehrung aller Bits einer hexadezimalen Farbangabe entsteht).

### Beachten Sie:

Die Farbangabe `invert` wird von vielen Browsern nicht unterstützt.

## outline-style (Rahmentyp)

Die Angabe `outline-style` ist identisch zu `border-style`. Erlaubt ist eine der folgenden Angaben.

`none` = kein Rahmen (bzw. unsichtbarer Rahmen).
`hidden` = kein Rahmen (bzw. unsichtbarer Rahmen), siehe Hinweis.
`dotted` = gepunktet.
`dashed` = gestrichelt.
`solid` = durchgezogen.
`double` = doppelt durchgezogen.
`groove` = 3D-Effekt.
`ridge` = 3D-Effekt.
`inset` = 3D-Effekt.
`outset` = 3D-Effekt.

## outline (Rahmen allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
outline-width
outline-style
outline-color

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>outline</title>
    <style type="text/css">
    h1 { outline:4px double blue; padding-bottom:4px; margin:0px; }
    h2 { outline:1px solid blue; margin:0px; }
    p { line-height:150%; }
    p.info { outline:4px solid invert; background-color:yellow; padding:4px; margin:0px; }
    span.rahmen { outline:2px solid red; }
    body { font-family:Tahoma,Helvetica,sans-serif; }
    </style>
    </head><body>

    <h1>&Uuml;berschrift erster Ordnung</h1>

    <p>xxxxx xxxxx usw... <span class="rahmen">xxxxx xxxxx xxxxx usw...</span> xxxxx
    xxxxx</p>

    <h2>&Uuml;berschrift zweiter Ordnung</h2>

    <p>xxxxx xxxxx xxxxx usw.</p>

    <p class="info">xxxxx xxxxx xxxxx usw.</p>

    </body></html>

### Erläuterung:

Das Beispiel ist nahezu eine identische Kopie von `border`.

Mit `outline` können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den Beispielen oben. Die Reihenfolge der Einzelangaben ist egal.

Beachten Sie das unterschiedliche Verhalten des Rahmens beim `<span>`, wenn der darin enthaltene Text sich auf mehrere Zeilen verteilt. `outline` sorgt dafür, dass jeder einzelne Textabschnitt vollständig von einem Rahmen umschlossen ist, auch wenn die einzelnen Stücke nicht zusammenhängend platziert werden können. Bei `border` hingegen wird eventuell eine Seite eines Teilstückes offengelassen.

| Hintergrundfarben und -bilder
| Innenabstand

© 2007 Impressum