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;- всі кордони червоні
- Нотатка
-
Ви маєте впевнитися, що
автор: Svitlanaborder-widthне дорівнює 0, аborder-styleне дорівнює none абоhidden, щоб показати межу.
Синтаксис
border-bottom-color: color|transparent|initial|inherit;Властивість border-color може отримувати 4 значень:
-
color -
Встановлює колір кордону. Колір в стилях можна задавати різними способами: за шістнадцятиричним кодом, за назвою, в форматі
автор: SvitlanaRGB, RGBA, HSL, HSLA -
transparent -
Встановлює прозорий колір
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | Поточний колір елементу |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderColor="#FF0000 blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Два значення розподіляються навхрест: перше — верхня й нижня межі (червоні), друге — ліва і права (сині).
HTML
<p>Верх і низ — червоні, боки — сині.</p>CSS
p {
border-style: solid;
border-color: #ff0000 #0000ff;
padding: 8px;
}Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!