CSS -randkleur
CSS-randkleur
De border-coloreigenschap wordt gebruikt om de kleur van de vier randen in te stellen.
De kleur kan worden ingesteld door:
- naam - geef een kleurnaam op, zoals "rood"
- HEX - geef een HEX-waarde op, zoals "#ff0000"
- RGB - geef een RGB-waarde op, zoals "rgb(255,0,0)"
- HSL - geef een HSL-waarde op, zoals "hsl(0, 100%, 50%)"
- transparant
Opmerking: als border-colordit niet is ingesteld, neemt het de kleur van het element over.
Voorbeeld
Demonstratie van de verschillende randkleuren:
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
Resultaat:
Red border
Green border
Blue border
Specifieke zijkleuren
De border-coloreigenschap kan één tot vier waarden hebben (voor de bovenrand, rechterrand, onderrand en linkerrand).
Voorbeeld
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
HEX-waarden
De kleur van de rand kan ook worden opgegeven met een hexadecimale waarde (HEX):
Voorbeeld
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
RGB-waarden
Of door RGB-waarden te gebruiken:
Voorbeeld
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
HSL-waarden
U kunt ook HSL-waarden gebruiken:
Voorbeeld
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
U kunt meer leren over HEX-, RGB- en HSL-waarden in onze hoofdstukken over CSS-kleuren .