CSS-Border

In diesem Kapitel werden wir über border sprechen, und wie wir sie stylen können. Wir können unserem Rand Stil, Farbe und Breite verleihen.

Für den Anfang betrachten wir die Stile der Ränder.

Die Werte von border-style sind:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Border Width

Die Eigenschaft border-width wird verwendet, um die Breite des Randes festzulegen.

Die Breite wird in Pixel angegeben, oder durch Verwendung eines der drei vordefinierten Werte: thin, medium, oder thick.

Bemerken Sie bitte, dass die Eigenschaft "border-width" nicht funktioniert, wenn sie allein verwendet wird. Verwenden Sie zuerst die Eigenschaft "border-style", um die Grenzen einzustellen.

Border Color

Die Eigenschaft border-color wird verwendet, um die Farbe des Randes festzulegen. Die Farbe wird eingestellt durch:

  • name - geben Sie einen Farbnamen an, z. B. "rot"
  • RGB - geben Sie einen Wert RGB an, z. B "rgb(255,0,0)"
  • Hex - geben Sie einen Hex-Wert an, z. B "#ff0000"

Vergessen Sie nicht, dass die Eigenschaft "border-color" nicht funktioniert, wenn sie allein verwendet wird. Verwenden Sie zuerst die Eigenschaft "border-style", um die Grenzen einzustellen.

Normalerweise schreibt man diese 3 Eigenschaften zusammen in einer Zeile.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9">Ein Beispiel mit blau gestricheltem Rand.</p>
    <p style="border:3px dashed #ffff00">Ein Beispiel mit gelb gestricheltem Rand.</p>
    <p style="border:3px solid #8ebf42"> Ein Beispiel mit grün durchgezogenem Rand.</p>
  </body>
</html>

Weitere Beispiele finden Sie in unserem CSS Maker auf der Homepage unserer Webseite.

Übe dein Wissen

Was kann man mit CSS-Border tun?
Finden Sie das nützlich?