Grundlagen zum Arbeiten mit Rahmen in CSS

Jetzt lernen wir, wie man Rahmen zu Elementen hinzufügt. Dies geschieht mit drei Eigenschaften: Die Eigenschaft border-width legt die Dicke des Rahmens fest, border-color die Farbe und border-style den Stil des Rahmens.

Die ersten beiden Eigenschaften funktionieren auf offensichtliche Weise: border-color akzeptiert Farben im gleichen Format wie die Eigenschaft color, und die Rahmendicke wird in Pixeln angegeben. Die Eigenschaft border-style hingegen akzeptiert Werte in Form von Schlüsselwörtern. Zum Beispiel legt der Wert solid eine durchgehende Linie fest.

Erstellen wir zum Beispiel einen Rahmen mit einer Dicke von 3 Pixeln, als durchgehende Linie, in der Farbe Rot:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* Dicke 3px */
  border-style: solid;  /* als Linie */
  border-color: red;    /* rote Farbe */
  width: 300px;
  height: 100px;
}

Результат:

In den folgenden Lektionen werden wir die Arbeit mit Rahmen genauer betrachten.