CSS Rahmen über Positionseigenschaften festlegen

Die Erstellung eines Rahmens für ein Element der Website kann auf unterschiedliche Art und Weise erfolgen. Eine Möglichkeit ist die Kurzschreibweise mit border. Es ist auch möglich, dies über bestimmte Schlüsselwörter für die Eigenschaften des Rahmens festzulegen. Eine dritte Möglichkeit bieten die Schlüsselwörter, die sich auf die Position eines Rahmens beziehen. Hierbei kann man für jede Seite des Rahmens die Eigenschaften individuell festlegen. Wenn man z.B. die Werte für die obere Rahmenlinie angeben möchte, kann man folgende Eigenschaften verwenden.

  • border-top-width (Rahmenbreite)
  • border-top-style (Rahmenart)
  • border-top-color (Rahmenfarbe)

Ein Beispiel, in dem die Eigenschaften für die obere Rahmenlinie festgelegt werden, ist nachfolgend abgebildet.

CSS-Angaben für Rahmenlinie oben

Kurzschreibweise

Die Werte für die drei Eigenschaften (Breite, Art, Farbe) können auch in der Kurzschreibweise angegeben werden. Hierfür verwendet man für die obere Rahmenlinie die folgende Eigenschaft.

  • border-top

Die einzelnen Werte werden nacheinander mit einem Leerzeichen getrennt angegeben.

Kurzschreibweise für obere Rahmenlinie

CSS Angaben für die übrigen Seiten

Wie bei der oberen Rahmenlinie verfährt man auch bei den übrigen Seiten. Das einzige was sich dabei ändert, sind die Schlüsselwörter für die Eigenschaften. Diese sind wie folgt.

Für die rechte Seite:

  • border-right-width
  • border-right-style
  • border-right-color

Für die Kurzschreibweise:

  • border-right

Für die untere Seite:

  • border-bottom-width
  • border-bottom-style
  • border-bottom-color

Für die Kurzschreibweise:

  • border-bottom

Für die linke Seite:

  • border-left-width
  • border-left-style
  • border-left-color

Für die Kurzschreibweise:

  • border-left

Gegenüberstellung der Schreibweisen

Generell sollte man die Kurzschreibweise vorziehen, da man hierbei erhebliche Zeilen Code spart und für eine bessere Übersicht sorgt. Ein Beispielcode, mit beiden Varianten.

/* Lange Schreibweise */
.selektor {
border-top-width: 1px;
border-top-style: dashed;
border-top-color: red;

border-right-width: 2px;
border-right-style: dotted;
border-right-color: blue;

border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: green;

border-left-width: 4px;
border-left-style: double;
border-left-color: black;
}

/* Kurzschreibweise */
.selektor {
border-top: 1px dashed red;
border-right: 2px dotted blue;
border-bottom: 3px solid green;
border-left: 4px double black;
}

Wie man sieht, spart man durch die Kurzschreibweise sehr viele Zeilen CSS-Code. Die Rahmenart ist übrigens eine Pflichtangabe. Ohne sie anzugeben würde an der Stelle keine Rahmenlinie erscheinen. Die beiden übrigen Werte (Breite, Farbe) sind optional. Wenn sie nicht angegeben werden, wird als Standardwert für die Breite medium und für die Rahmenfarbe ein Standardwert (Schwarz) verwendet.