CSS border – Eigenschaften eines Rahmens

Mit CSS border wird der Rahmen eines Elements festgelegt. Verschiedene Eigenschaften machen ein CSS Design damit sehr individuell. Von Rahmenstärke über Farben bis zum Linienstil.

Beschreibung und Syntax zu CSS border

border: 1px solid red;
border-top: 2px dotted blue;
border-right: 5px dashed #000000;
border-bottom: 1em inset grey;
border-left: 10px ridge green;

Erläuterung der Eigenschaften

border
Bestimmt alle 4 Seiten des Elements mit gleicher Rahmenstärke, Linienstil und Farbe. Es können Farbcodes oder Farbnamen verwendet werden. Lese dazu mehr bei css color.

border-top , border-right , border-bottom , border-left
Bestimmt jede Seite einzeln. top (oben), right (rechts), bottom (unten), left (links).

Der Linienstil (border-style)

Es gibt verschiedene Stilarten der Linien bzw. des kompletten Rahmens. Der Eigenschaftswert könnte durch die Linienstärke (border-width) anders aussehen. Doppellinien oder 3D-Linien benötigen daher einen dickeren Rahmen, welcher aber nicht zwingend erforderlich ist.

• dashed (gestrichtelte Linie)
• dotted (gepunktete Linie) – damit lässt sich oft eine Linie augenscheinlich dünner gestallten
• double (doppelte Linie)
• groove (3D-Linie, wandelt die Rahmenfarbe in 2 Teile um, für top+left sowie right+bottom)
• outset (3D-Linie, sieht aus wie herausgesetzt)
• inset (3D-Linie, wie outset, nur umgekehrt)
• solid (durchgezogene Linie)

Informationen und Werte

Vererbbar: Nein
Initialwert: none (kein Rahmen)
Werte: Siehe Code-Beispiel und Linienstile