Wir definieren über CSS Befehle ebenfalls den Rahmen von HTML Objekten. Dazu weisen wir diesem mindestens eine Rahmenstärke zu. Um Farbe und Stil des Rahmens zu modifizieren, verwenden wir weitere Befehle. Dazu können wir ebenfalls die Mischschreibweise von CSS nutzen.
Ein Beispiel für einen gemischten Rahmen-Befehl:border:2px dotted red; (2 Pixel stark, gepunktet, rot)
So reicht eine Anweisung, um Stärke, Farbe und Stil anzugeben. Somit sparen wir uns einige Zeilen CSS Code und halten den Quellcode schlank. Auch ist es mit CSS möglich, bei Rahmen nur bestimmte Seiten anzusprechen. Das funktioniert zum Beispiel so: „border-top:3px solid green;“
Dies versieht den Rahmen am Kopf eines Objektes mit den definierten Eigenschaften zur Darstellung. In diesem Fall handelt es sich um einen durchgezogenen, 3 Pixel starken, grünen Rahmen. Per CSS Anweisung können bei Rahmen Innenabstand und Außenabstand festgelegt werden, damit Inhalte, beziehungsweise benachbarte Elemente, sich nicht zu nahe kommen.
Den Rahmen Abrunden können wir mir dem Befehl border-radius.
| Befehl | Bedeutung | Mögliche Werte |
|---|---|---|
border-width | Rahmenstärke / Dicke | Integer Wert in Pixel (px), mm, cm oder em |
border-color | Rahmenfarbe | Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, … |
border-style | Rahmenstil | einfach (solid), gepunktet (dotted), gestrichelt (dashed), … |
border | Kombination / vereinfachte Schreibweise | border: width style color; |
border-top/right/bottom/left | Kombination / vereinfachte Schreibweise für nur oben, rechts, unten, links | border-top: width style color; |
| border-collapse | Tabellenrahmen | separate (jede Zelle hat einen eigenen Rahmen), collapse (Zellerahmen sind verbunden) |
| border-spacing | Tabellenrahmen Abstände | Integer Wert in Pixel (px), mm, cm oder em |
outline-width | Konturstärke / Dicke | Integer Wert in Pixel (px), mm, cm oder em |
outline-color | Konturfarbe | Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, … |
outline-style | Konturstil | einfach (solid), gepunktet (dotted), gestrichelt (dashed), … |
outline | Kombination / vereinfachte Schreibweise | outline: width style color; |
Beispiel
.element {
border:3px solid rgb(230,180,40);
border-top:1px dotted red;
border-right:3px dashed;
}