Das Box-Modell - Beispiel Rahmen

Der Rahmen

Der Rahmen (border) wird festgelegt durch die Rahmenbox border-box.

Wenn man von das Modell von innen nach außen betrachtet, dann folgt auf den Inhalt der Innenabstand und dann nach außen die Rahmenbox.

Wenn kein Rahmen angegeben ist, dann ist die Kante des Rahmens identisch mit der des Paddings.

Mögliche Angaben des Rahmens sind Linienbreite, Rahmenart und Farbe. Diese werden durch Leerzeichen getrennt angegeben.

Beispiel: border: 15px dotted black; erzeugt einen Rahmen der Breite 15 Pixel, der gepunktet und schwarz ist.


Dieser Text ist mit einem Innenabstand von padding: 30px und border: 10px dottet magenta formatiert.

Dieser Text ist mit einem linken Innenabstand von padding-left: 100px und border: 10px solid darkViolet formatiert.

Dieser Text ist mit einem oberen und unteren Innenabstand von padding-top: 60px und border: 15px groove indigo formatiert.