css властивість border-color


Властивість border-color встановлює колір всіх кордонів елемента. Властивість може мати одночасно до чотирьох значень.

Властивість `border-color`

border-color - це властивість для скороченого запису border-top-color, border-right-color, border-bottom-color, border-left-color. Якщо ви хочете задати колір тільки для деяких меж (але не всіх відразу), то краще використовувати вище згадані властивості.

Значення без задання currentColor (який дорівнює властивості color).

Від кількості аргументів змінюється їх призначення

Число значень Результат
1 Задає колір кордону для всіх сторін.
2 Перше значення задає колір для верхнього та нижнього кордону, друге - для лівого та правого.
3 Перше значення задає колір для верхнього кордону, друге - для лівого та правого, останнє - для нижнього кордону.
4 По черзі встановлює колір для верхнього, правого, нижнього та лівого кордонів.

Приклади:

  1. border-color:red green blue pink;
    • верхній кордон червоний
    • правий кордон зелений
    • нижній кордон блакитний
    • лівий кордон рожевий
  2. border-color:red green blue;
    • верхній кордон червоний
    • правий та лівий кордони зелені
    • нижній кордон блакитний
  3. border-color:red green;
    • верхній та нижній кордони червоні
    • лівий та правий праві кордони зелені
  4. border-color:red;
    • всі кордони червоні
Нотатка:

Ви маєте впевнитися, що border-width не дорівнює 0, а border-style не дорівнює none або hidden, щоб показати межу.

Синтаксис

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

Властивість border-color може отримувати 4 значення:

color

Встановлює колір кордону. Колір в стилях можна задавати різними способами: за шістнадцятиричним кодом, за назвою, в форматі RGB, RGBA, HSL, HSLA

transparent

Встановлює прозорий колір

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента

Значення без задання: Поточний колір елементу
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.borderColor="#FF0000 blue"

Переглядачі

Переглядач
border-color

1.0

4.0

1.0

1.0

3.5

Переглядач
border-color

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Демонстрація роботи властивості

Демонстрація роботи властивості

Приклад використання властивості

Встановлення кольору всіх границь

p { 


  border-style: solid; 


  border-color: #ff0000 #0000ff; 


}

Додаткові посилання