Kolor obramowania CSS
Kolor obramowania CSS
Właściwość border-color
służy do ustawienia koloru czterech obramowań.
Kolor można ustawić poprzez:
- nazwa - określ nazwę koloru, np. "czerwony"
- HEX — określ wartość HEX, np. „#ff0000”
- RGB — określ wartość RGB, np. „rgb(255,0,0)”
- HSL — określ wartość HSL, np. „hsl(0, 100%, 50%)”
- przezroczysty
Uwaga: Jeśli border-color
nie jest ustawiony, dziedziczy kolor elementu.
Przykład
Demonstracja różnych kolorów obramowania:
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
Wynik:
Red border
Green border
Blue border
Specyficzne kolory boków
Właściwość border-color
może mieć od jednej do czterech wartości (dla górnej granicy, prawej granicy, dolnej granicy i lewej granicy).
Przykład
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
Wartości szesnastkowe
Kolor obramowania można również określić za pomocą wartości szesnastkowej (HEX):
Przykład
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
Wartości RGB
Lub używając wartości RGB:
Przykład
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
Wartości HSL
Możesz również użyć wartości HSL:
Przykład
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
Możesz dowiedzieć się więcej o wartościach HEX, RGB i HSL w naszych rozdziałach Kolory CSS .