#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
hueund kann von 0 bis 359 - Der zweite Wert ist für
saturationund geht von 0% bis 100% - Der dritte Wert ist für
luminosityund geht von 0% bis 100%
reichen.
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
alphaKanal 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.
- Virtuelle private Netzwerke (VPN): Was steckt hinter dieser Technologie? - 30. August 2022
