Rahmen

Frohe Botschaft: Man kann in CSS2 einrahmen, was immer man will (fast). Dahinter steht in der CSS-Philosophie das "Box model"; ich weiß keine offizielle deutsche Übersetzung, nennen wir es "Kasten-Modell". Solche rechteckigen Kästen sind den meisten HTML-Tags bzw. XHTML-Tags zugeordnet. Zu einem Kasten gehören von außen nach innen gesehen

margin, durchsichtig; um Abstände zu Nachbarkästen zu erzeugen,
border, den sichtbaren oder gestalteten Rand des Bereiches,
padding Innenabstand, er trägt die Hintergrundfarbe (background-color) des Kastens
Content, der Inhalt; dies kommt als Schlüsselwort nicht vor, deshalb hier groß geschrieben.

Dazu gehört inhaltlich dasjenige mit den Abständen, die es einmal als padding = Innenabstand, beispielsweise bei Tabellenzellen oder eben auch Rahmen, sowie als margin = Außenabstand gibt und die deshalb stets in Begleitung der border-Angaben auftauchen werden.

Möglichkeiten der Gestaltung von Rahmen
CSS-Attribut	Bedeutung
border border-top border-right border-bottom border-left	zusammengefaßte Angaben, Werte einfach durch Zwischenraum getrennt folgen lassen: `...-width ...-style ...-color`. Eine Angabe bedeutet Werte ringsum. Zwei: Erste Zahl steht für oben und unten, zweite für rechts und links. Drei Angaben: Erste Zahl steht für oben, zweite für rechts und links und dritte für unten. Vier Angaben werden im Uhrzeigersinn realisiert. Oben beginnt. Diese Art der verkürzten Wertevergabe gilt für alle folgenden Attribute, ebenso wie für die verwandten Abstandsangaben (margin, padding).
border-color border-top-color border-right-color border-bottom-color border-left-color	Rahmenfarbe in Farbwerten oder mit Schlüsselwort "transparent", immer border-style mit angeben! Es können ein bis vier Werte angegeben werden, dabei gelten die Zuordnungen wie bei border-width (siehe unten)
border-style border-bottom-style border-left-style border-right-style border-top-style	Rahmentyp mit den möglichen Angaben: `dashed, double, dotted, groove, hidden, inset, none, outset, ridge, solid`. Es können wie bei den übrigen border-Angaben auch hier ein bis vier Angaben ohne Komma gemacht werden, die dann entsprechend für spezielle Grenzen oder Paare von Grenzen gelten. Der border-style sollte zusammen mit border-width zur Sicherheit immer angegeben werden.
border-width border-bottom-width border-left-width border-right-width border-top-width	Rahmendicke ringsum, unten, links, rechts, oben in Zahlen: `border-with: 1px 2px 3px 4px` oder `thin, medium, thick` immer border-style mit angeben!
outline	Die sozusagen nachträgliche Variante von Rahmen, nicht in des Design eingebaut, sondern darübergelegt, deshalb prinzipiell auch bei aufgebauter Seite veränderbar. Für den Platzbedarf muß man also extra sorgen! Outline kann die gesammelten Angabe in der Reihenfolge `outline-color outline-style outline-width` aufnehmen. OUTLINE: Hier mit `<p style="outline:invert double 5px"> ...`
outline-color	Wie bei border, aber hier gibt es einen Anfangswert " `invert`", der immer für Sichtbarkeit sorgen soll. Außerdem gibt es nur in sich einheitlich gefärbte Outlines
outline-style	Fast wie border: `dashed, double, dotted, groove, inset, none, outset, ridge, solid`, wer aufgepasst hat, hat bemerkt, es fehlt " `hidden`" Weil es so schön ist!: `<p style="outline-style:dotted"> ...`
outline-width	Anders als bei border gibt es immer nur ganze Umrandungen!

Nun ein bißchen Spielwiese.
Die folgenden Aufrufe erfolgen sämtlich nach dem Muster:
<div style="border:1cm groove #FF00FF;">aufruftext</div>.
Die Angaben zu margin und padding sorgen für Abstand der Rahmen untereinander und Luft um die Einträge.

<div style="border:3mm dashed #F00;text-align:center ">aufruftext</div>

<div style="border:3mm double #0F0;text-align:center ">aufruftext</div>

<div style="border:3mm dotted #00F;text-align:center ">aufruftext</div>

<div style="border:3mm groove #FF0;text-align:center ">aufruftext</div>

<div style="border:3mm inset #F0F;text-align:center ">aufruftext</div>

<div style="border:none;text-align:center ">aufruftext</div>

Warum habe ich gerade auf soviele Angaben verzichtet?

<div style="border:3mm outset #FF0;text-align:center ">aufruftext</div>

<div style="border:3mm ridge #8FF;text-align:center ">aufruftext</div>

<div style="border:5mm solid #F8F;text-align:center ">aufruftext</div>

Es folgen "wildere" Angaben, nur zum Testen.

<div style=""border-width:1px 2mm 3em 4cm; border-style:solid; border-color:#888; margin:20px; padding:10px; text-align:center"> aufruftext</div>

<div style="border:4mm solid; border-top-color:#f00; border-right-color:#0f0; border-left-color:#00f; border-bottom-color:#0ff; margin:20px; padding:10px; text-align:center">aufruftext</div>

Nun noch ein paar ohne ausführliche Code-Darstellung, bei Interesse bitte selbst nachgucken

Rahmen double, Dicke thick, oben, farbig.

Rahmen inset, Dicke medium, rechts, farbig.

Rahmen outset, Dicke thin, unten, farbig.

Rahmen ridge, Dicke 4 mm, links, farbig.

Rahmen groove, Dicke 5mm, links und oben, farbig.

Badewanne