css властивість border-color
Властивість border-color встановлює колір всіх кордонів елемента. Властивість може мати одночасно до чотирьох значень.
border-color - це властивість для скороченого запису border-top-color, border-right-color, border-bottom-color, border-left-color. Якщо ви хочете задати колір тільки для деяких меж (але не всіх відразу), то краще використовувати вище згадані властивості.
Значення без задання currentColor (який дорівнює властивості color).
Від кількості аргументів змінюється їх призначення
| Число значень | Результат |
|---|---|
| 1 | Задає колір кордону для всіх сторін. |
| 2 | Перше значення задає колір для верхнього та нижнього кордону, друге - для лівого та правого. |
| 3 | Перше значення задає колір для верхнього кордону, друге - для лівого та правого, останнє - для нижнього кордону. |
| 4 | По черзі встановлює колір для верхнього, правого, нижнього та лівого кордонів. |
Приклади:
border-color:red green blue pink;- верхній кордон червоний
- правий кордон зелений
- нижній кордон блакитний
- лівий кордон рожевий
border-color:red green blue;- верхній кордон червоний
- правий та лівий кордони зелені
- нижній кордон блакитний
border-color:red green;- верхній та нижній кордони червоні
- лівий та правий праві кордони зелені
border-color:red;- всі кордони червоні
| Нотатка: | Ви маєте впевнитися, що |
Синтаксис
border-bottom-color: color|transparent|initial|inherit;Властивість border-color може отримувати 4 значення:
colorВстановлює колір кордону. Колір в стилях можна задавати різними способами: за шістнадцятиричним кодом, за назвою, в форматі
RGB, RGBA, HSL, HSLAtransparentВстановлює прозорий колір
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;
}