Właściwość CSS border-color

Definicja stylu, przeznaczenie i użycie border-color

Właściwość border-color określa kolor czterech krawędzi elementu. Ta właściwość może mieć od jednej do czterech wartości.

Jeśli właściwość border-color ma cztery wartości:

• border-color: black green blue red;
  • to górny kolor obramowania jest czarny (black),
  • to prawy kolor obramowania jest zielony (green),
  • to dolny kolor obramowania jest niebieski (blue),
  • to lewy kolor obramowania jest czerwony (red).

Jeśli właściwość border-color ma trzy wartości:

• border-color: black green red;
  • to górne obramowanie jest czarne (black),
  • to prawe i lewe obramowanie są zielone (green),
  • to dolne obramowanie jest czerwone (red).

Jeśli właściwość border-color ma dwie wartości:

• border-color: black red;
  • to górne i dolne obramowanie są czarne (black),
  • to prawe i lewe obramowanie są czerwone (red).

Jeśli właściwość border-color ma jedną wartość:

• border-color: black;
  • to wszystkie cztery obramowania są czarne (black).

Uwaga: Zawsze deklaruj właściwość border-style przed właściwością border-color. Element musi mieć najpierw obramowanie, zanim będzie można zmienić kolor.

Wartości właściwości border-color

Składnia CSS border-color

border-color: color | transparent | initial | inherit;

Wsparcie przeglądarek dla właściwości border-color

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość
border-color	1.0	4.0	1.0	1.2	3.5

Przykładowe zastosowania z właściwością border-color

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

div {
    border-style:solid;
    border-width:5px;  
    border-color:red;
}

Przykłady właściwości align

Przykład 1. Ustawia kolor obramowania: div {border-color: brown;} Przykład 2. Ustawia kolor obramowania za pomocą wartości HEX: div {border-color: #444879;} Przykład 3. Ustawia kolor obramowania za pomocą wartości RGB: div {border-color: rgb(160, 54, 74);} Przykład 4. Ustawia kolor obramowania za pomocą wartości RGBA: div {border-color: rgba(160, 54, 74, 0.3);} Przykład 5. Ustawia kolor obramowania z wartością HSL: div {border-color: hsl(78, 39%, 47%);} Przykład 6. Ustawia kolor obramowania za pomocą wartości HSLA: div {border-color: hsla(78, 51%, 67%, 0.3);} Przykład 7. Ustawia inny kolor obramowania dla każdego elementu: div.przyklad1 {border-color: #0000ff;} div.przyklad2 {border-color: #ff0000 #0000ff;} div.przyklad3 {border-color: #ff0000 #00ff00 #0000ff;} div.przyklad4 {border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);}