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	По черзі встановлює колір для верхнього, правого, нижнього та лівого кордонів.

Приклади:

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

автор: Svitlana

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

Синтаксис

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

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

color

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

автор: Svitlana

transparent

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

автор: Svitlana

initial

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

автор: Svitlana

inherit

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

автор: Svitlana

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

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
border-color	1.0	1.0	1.0	3.5	4.0

Підтримка: мобільні переглядачі
Переглядач
border-color	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

Два значення розподіляються навхрест: перше — верхня й нижня межі (червоні), друге — ліва і права (сині).

HTML

<p>Верх і низ — червоні, боки — сині.</p>

CSS

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

автор: Svitlana

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

автор: Svitlana

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

автор: Svitlana

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

автор: Svitlana

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

автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!