(Universalattribute)
Die Elemente Absatz (<p>), Überschrift (<h[1-6]>), Adresse (<address>), Textblock (<blockquote>), präformatierter Text (<pre>), Bereich (<div>), Tabelle (<table>), Tabellenzeile (<tr>), Tabellenspalte (<th>), Tabellenzelle (<td>), Dokumentkörper (<body>) und zentrierter Bereich (<center>) können auf die hier beschriebene Weise Rahmen erhalten. Das brauchst du dir aber nicht alles zu merken. Wenn die Elemente beschrieben werden, wird noch mal auf diese Möglichkeit hingewiesen.
Rahmendicke (border-width) <p style="border-width:thin"> erzeugt einen Absatz, der eine dünne Rahmenlinie hat. Erlaubt sind die Angaben thin für dünn, medium für mitteldick, thick für dick und numerische Angaben in erlaubten Einheiten. Das funktioniert so aber nur beim NN. Beim IE muß zusätzlich noch der Rahmentyp festgelegt werden. Die Möglichkeiten, die es dazu gibt, werden unten noch erklärt. Alle Beispiele hier enthalten natürlich diese Angabe, damit du den Rahmen überhaupt sehen kannst wenn du den IE verwendest. Außerdem werden die Rahmen bei IE und NN unterschiedlich dargestellt. Bei Textabsätzen zieht der IE den Rahmen über die gesamte zur Verfügung stehende Breite, während der NN den Rahmen nur um den Inhalt zieht. Eine einheitliche Darstellung erreicht man, indem man die Breite festlegt. Wie das geht wird noch beschrieben.
Rahmendicke oben (border-top-width) <p style="border-top-width:2cm"> erzeugt einen Absatz, der oben eine 2 cm dicke Rahmenlinie hat.
Rahmendicke unten (border-bottom-width) <p style="border-bottom-width:25px"> erzeugt einen Absatz, der unten eine 25 Pixel dicke Rahmenlinie hat.
Rahmendicke links (border-left-width) <p style="border-left-width:1in"> erzeugt einen Absatz, der links eine 1 Inch dicke Rahmenlinie hat.
Rahmendicke rechts (border-right-width) <p style="border-right-width:3em"> erzeugt einen Absatz, der rechts eine 3 em dicke Rahmenlinie hat.
Rahmentyp (border-style) <p style="border-style:solid; border-width:medium"> erzeugt einen Absatz, der eine durchgezogene, mitteldicke Rahmenlinie hat. Erlaubt sind die Angaben none für kein Rahmen, dottet für gepunktet, dashed für gestrichelt, solid für druchgezogen, double für doppelt, groove für einen 3D-Effekt, ridge für einen anderen 3D-Effekt, inset für 3D und outset für 3D. Manche der Rahmentypen funktionieren nur, wenn du eine Farbe angibst die sich von schwarz unterscheidet. Die Rahmenfarben werden unten erklärt. NN interpretiert die Angabe border-style nur, wenn außerdem die Rahmendicke festgelegt wird. Damit es beim IE und beim NN klappt, musst du den Rahmen wie in diesem Beispiel mit Rahmentyp und Rahmendicke festlegen.
Rahmentyp oben (border-top-style) <p style="border-top-style:groove; border-top-width:thick"> erzeugt einen Absatz der oben eine dicke Rahmenlinie mit dem Effekt "groove" hat. Für das Beispiel wurde die Farbe #808080 (grau) verwendet.
Rahmentyp unten (border-bottom-style) <p style="border-bottom-style:ridge; border-bottom-width:25px"> erzeugt einen Absatz, der unten eine 25 Pixel dicke Rahmenlinie mit dem Effekt "ridge" hat. Für das Beispiel wurde die Farbe #800000 (dunkelrot) verwendet.
Rahmentyp links (border-left-style) <p style=" border-left-style:inset; border-left-width:1in"> erzeugt einen Absatz der links eine 1 Inch dicke Rahmenlinie mit dem Effekt "inset" hat. Für das Beispiel wurde die Farbe #008000 (dunkelgrün) verwendet.
Rahmentyp rechts (border-right-style) <p style="border-right-style:outset; border-right-width:3em"> erzeugt einen Absatz der rechts eine 3 em dicke Rahmenlinie mit dem Effekt "outset" hat. Für das Beispiel wurde die Farbe #8888FF (ein helles Blau) verwendet.
Rahmenfarbe (border-color) <p style="border-style:dotted; border-width:thick; border-color:#123ABC"> erzeugt einen Absatz, der einen gepunkteten, dicken Rahmen in der Farbe #123ABC hat. Mehr über Farbangaben kannst du hier und hier und hier nachlesen.
Natürlich kannst du die Angaben für den Rahmen oben, unten, rechts und links kombinieren.
Weiter geht's auf der Seite "Abstand vom Rahmen".
Um einen Link zu setzen, der direkt auf diese Seite führt,
verwende folgende Url: