Atrybut border-color CSS

Definicja i użycie

Atrybut border-color ustawia kolory czterech krawędzi ramki. Można ustawić od 1 do 4 kolorów.

Atrybut border-color to skrócona cecha, która może ustawić kolor wszystkich widocznych krawędzi elementu, lub ustawiać różne kolory dla czterech krawędzi. Zobacz poniższy przykład:

Przykład 1

border-color:red green blue pink;
  • Górna krawędź jest czerwona
  • Prawy ramka jest zielony
  • Dolna krawędź jest niebieska
  • Lewa krawędź jest różowa

Przykład 2

border-color:red green blue;
  • Górna krawędź jest czerwona
  • Prawa i lewa krawędź są zielone
  • Dolna krawędź jest niebieska

Przykład 3

border-color:dotted red green;
  • Górna i dolna krawędź są czerwone
  • Prawa i lewa krawędź są zielone

Przykład 4

border-color:red;
  • Wszystkie cztery krawędzie są czerwone

Pamiętaj, że styl krawędzi nie może być none lub hidden, w przeciwnym razie krawędź nie będzie widoczna.

Komentarz:Zawsze deklaruj atrybut border-style przed atrybutem border-color. Element musi mieć krawędź przed zmianą koloru.

Zobacz również:

Kurs CSS:Pasek CSS

Podręcznik HTML DOM:Atrybut borderColor

Przykład

Ustawienie kolorów czterech krawędzi:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
color_name Określa kolor krawędzi jako nazwę koloru (np. red).
hex_number Określa kolor krawędzi jako wartość szesnastkową (np. #ff0000).
rgb_number Określa kolor krawędzi jako kod rgb (np. rgb(255,0,0)).
transparent Domyślna wartość. Kolor krawędzi jest przezroczysty.
inherit Określa, że kolor krawędzi powinien być dziedziczony od elementu nadrzędnego.

Szczegóły techniczne

Domyślna wartość: nie określono
Inheredowanie: nie
Wersja: CSS1
Język JavaScript: object.style.borderColor="#FF0000 blue"

Więcej przykładów

Ustawienie kolorów czterech krawędzi
Ten przykład pokazuje, jak ustawić kolory czterech krawędzi. Można ustawić od jednego do czterech kolorów.

Obsługa przeglądarek

Liczby w tabeli wskazują pierwszą przeglądarkę, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Komentarz:Przeglądarka Internet Explorer 6 (i wcześniejsze wersje) nie obsługuje wartości atrybutu "transparent".

Komentarz:Przeglądarki Internet Explorer 7 i wcześniejsze nie obsługują wartości "inherit". Internet Explorer 8 wymaga !DOCTYPE. Internet Explorer 9 obsługuje "inherit".