Rahmen

Schauen wir uns Rahmen genauer an. Einen haben wir schon geschrieben: border: 1px solid red. Die Eigenschaft border nimmt drei Werte:

border: Breite Stil Farbe;

• Die Breite, meist in Pixeln, zum Beispiel 2px.
• Der Stil der Linie: solid, dashed, dotted oder double. Der Wert none bedeutet keinen Rahmen.
• Die Farbe, in jedem Format, das du kennst, zum Beispiel #476958.

So sehen die Stile aus: solid dashed dotted double

Die Reihenfolge der Werte spielt keine Rolle, also funktioniert auch border: solid 2px #476958. Du kannst sogar die Breite oder die Farbe weglassen, dann verwendet der Browser einen Standardwert. Aber vergiss den Stil nicht: Sein Standardwert ist none, deshalb zeigt border: 2px red überhaupt keinen Rahmen.

Für einen Rahmen nur auf einer Seite gibt es die Eigenschaften border-top, border-right, border-bottom und border-left, die dieselben drei Werte nehmen. Zum Beispiel zeichnet border-bottom: 1px solid gray eine Linie unter einem Element.

Die roten Rahmen haben uns die Boxen gezeigt. Jetzt ersetzen wir sie durch schönere: Die beiden Textgruppen und die Liste der Rassen werden zu Karten mit weißem Hintergrund und grünem Rahmen.