Zum Inhalt springen

border-color

  • Redaktion 
  • Zuletzt aktualisiert am

#border-color

Bestimmt die Farbe der Ränder des Elements.

default border-color: transparent;

Wendet eine transparente Farbe auf die Ränder an. Die Ränder nehmen weiterhin den Raum ein, der durch den Wert border-width definiert ist.

border-color: red;

Sie können einen der 140+ Farbnamen verwenden.

border-color: #05ffb0;

Sie können hexadezimale Farbcodes verwenden.

border-color: rgb(50, 115, 220);

Sie können rgb() Farbcodes verwenden:

  • der erste Wert steht für rot
  • Der zweite Wert steht für grün
  • Der dritte Wert steht für blau

Jeder von ihnen kann einen Wert zwischen 0 und 255 haben.

border-color: rgba(50, 115, 220, 0.3);

Sie können rgba() Farbcodes verwenden:

  • Die ersten 3 Werte sind für rgb
  • der 4. Wert ist für den alpha-Kanal und definiert die Deckkraft der Farbe

Der Alphawert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

border-color: hsl(14, 100%, 53%);

Sie können hsl() Farbcodes verwenden:

  • Der erste Wert steht für hue und kann von 0 bis 359
  • reichen.

  • Der zweite Wert ist für saturation und geht von 0% bis 100%
  • Der dritte Wert ist für luminosity und geht von 0% bis 100%

border-color: hsla(14, 100%, 53%, 0.6);

Sie können hsl()a Farbcodes verwenden:

  • Die ersten 3 Werte sind für hsl
  • Der 4. Wert ist für den alpha Kanal und definiert die Deckkraft der Farbe

Der Alphawert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

Es gibt einige Dinge, die Webmaster bei der Verwendung der Eigenschaft border-color in ihrem CSS beachten sollten. Erstens gilt die Eigenschaft border-color nur für Elemente, die einen Rahmen haben. Sie müssen also sicherstellen, dass Ihr Element einen Rahmen hat, bevor Sie diese Eigenschaft verwenden können.

Zweitens kann die Eigenschaft border-color Farbwerte in einer Vielzahl von Formaten annehmen, darunter Schlüsselwörter, hexadezimale Werte, RGB-Werte und HSL-Werte. In der folgenden CSS-Datei wird die Eigenschaft “ border-color" beispielsweise auf die Farbe Rot gesetzt:

.my-element {
  border-color: red;
}

.my-element {
  border-color: #FF0000;
}

.my-element {
  border-color: rgb(255, 0, 0);
}

.my-element {
  border-color: hsl(0, 100%, 50%);
}

Drittens kann die Eigenschaft border-color in Verbindung mit den Eigenschaften border-style und border-width verwendet werden, um verschiedene Arten von Rahmen mit unterschiedlichen Farben, Stilen und Breiten zu erstellen. Mit dem folgenden CSS wird beispielsweise ein durchgehender roter Rahmen mit einer Breite von 5 Pixeln erstellt:

.my-element {
  border-color: red;
  border-style: solid;
  border-width: 5px;
}

Viertens kann die Eigenschaft border-color zusammen mit der Eigenschaft border shorthand verwendet werden, um die Farbe, den Stil und die Breite des Rahmens eines Elements in einer einzigen Deklaration festzulegen. Die folgende CSS-Deklaration entspricht zum Beispiel dem vorherigen Beispiel:

.my-element {
  border: 5px solid red;
}

Insgesamt ist die Eigenschaft border-color ein nützliches Werkzeug für Webmaster, die das Aussehen der Elemente ihrer Website anpassen möchten. Mit dieser Eigenschaft können Sie den Rändern Ihrer Elemente Farbe hinzufügen und eine optisch ansprechendere Website erstellen.

46946778f3980a7056863354400f8688?s=250&d=mm&r=g border-color
Letzte Artikel von Redaktion (Alle anzeigen)

    Nach oben