Rahmen sind nicht nur häufig wichtig für eine optisch ansprechende Gestaltung, sondern sie erleichtern das Verständnis des Box-Modells deutlich. Lassen wir uns nämlich beim betrachteten Element den Rahmen anzeigen, so werden wir im folgenden Abschnitt auch den Innenabstand und seine Veränderung direkt sehen können. In diesem Abschnitt behandeln wir, wie man einen Rahmen um ein Element erstellt und wie man ihn gestalten kann.

Rahmendicke

Am wichtigsten, um überhaupt einen Rahmen sehen zu können, ist es, ihm eine Dicke zuzuordnen, die größer ist als 0. Die CSS-Eigenschaft dafür heißt border-width. Die CSS-Regel kann dann zum Beispiel border-width: 1px; lauten, was für einen Rahmen sorgt, der 1px breit ist. Es können die vier Seiten des Rahmens auch unterschiedlich gestaltet werden. Dafür muss nur einer der Zusätze top (für oben), right (für rechts), bottom (für unten) oder left (für links) eingeschoben werden, z.B. border-bottom-width: 2px;. Diese Vorgehensweise funktioniert übrigens genauso auch bei den Eigenschaften, die wir uns in den folgenden Abschnitten ansehen, deshalb steht es nicht jedes Mal wieder dabei.

Rahmenstil

Der Rahmenstil wird mit der Eigenschaft border-style bearbeitet. Der mögliche Wert solid steht dann für eine durchgezogene Rahmenlinie, dotted dagegen steht für eine gepunktete Rahmenlinie. Hier gibt es auch wieder eine Vielzahl an Gestaltungsmöglichkeiten.

Rahmenfarbe

Nicht überraschend kommt nun die CSS-Eigenschaft für die Rahmenfarbe: border-color. Bei ihr gelten die gleichen Regeln wie für Text- und Hintergrundfarben. Es können also auch wieder Farbnamen oder Farbcodes angegeben werden.

Kurzschreibweise für Rahmen

Da man in den meisten Fällen alle drei Angaben festlegen möchte, gibt es die CSS-Eigenschaft border, welche alle drei obigen Eigenschaften zusammenfasst. Die zuehörigen Werte werden dann durch Leerzeichen getrennt angegeben. Die Regel border: 2px solid blue; führt somit zu einem 2px breiten blauen gepunkteten Rahmen.

Abgerundete Rahmen

Seit CSS3 gibt es auch eine Eigenschaft, mit der man den Rahmen von Elementen an den Ecken abrunden kann. Sie heißt border-radius und erfordert als Wert eine Längenangabe. border-radius: 5px;

sorgt dafür, dass der Rahmen ein bisschen abgerundet wird. Je größer der angegebene Wert ist, desto stärker ist die Abrundung.

Aufgaben

  1. Erstelle verschiedene Elemente mit verschiedenen Rahmen.
  2. Ändere die Stilangaben für einzelne Seiten der Rahmen und sie dir das Ergebnis jeweils an.
  3. Teste verschiedene Werte für border-radius. Wie ist es möglich, nur die obere linke Ecke abzurunden?