HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут border-color в CSS

Атрибут border-color в CSS

645

Встановлює колір кордону на різних сторонах елемента. Властивість дозволяє задати колір кордону відразу для всіх сторін елемента або тільки для вказаних.

Коротка інформація
Значення за замовчуванням Значення властивості color
Наслідує Ні
Застосовується До всіх елементів
Анімується Так

Синтаксис 

<code>border-color: [<колір> | transparent]{1,4}

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися у вказаному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

<колір>
Див. колір.
transparent
Встановлює прозорий колір.

Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх між собою пробілом. Результат залежить від кількості та вказано в табл. 1.

Табл. 1. Зміна кольору в залежності від кількості значень
Кількість значень Результат
1 Колір кордону буде встановлений для всіх сторін елемента.
2 Перше значення встановлює колір верхньої та нижньої межі , друге— лівої та правої.
3 Перше значення задає колір верхньої межі, друге — одночасно лівого та правого кордону, а третє — нижньої межі.
4 Почергово встановлюється колір верхнього, правого, нижнього та лівого кордону.

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що В цей час сніданок уже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.
-tablet is-6-desktop playground-values"> 
div { padding: 10px; border: 4px dotted; border-color: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-color</title> <style> h1 { border-color: red white; /* Колір кордону */
border-style: solid; /* Стиль кордону */
} 
p { border-color: #008a77; /* Колір кордону */
border-style: solid; /* Стиль кордону */
padding: 5px; /* Поля навколо тексту */
}
</style>
</head>
<body> <h1>Шоу-бізнес як внутрішньодискретне арпеджіо</h1> <p>Септакорд, згідно з традиційними уявленнями, ілюструє однокомпонентний шоу-бізнес.
</p>
</body>
</html>

Результат цього прикладу показаний на мал. 1.

Використання властивості border-color

Мал. 1. Використання властивості border-color

Об'єктна модель

Об'єкт.style.borderColor

Примітка

Internet Explorer до версії 7.0 не підтримує значення transparent.

Колір кордону в різних браузерах може дещо різнитися при використанні значень стилю groove, ridge, inset або outset.

Специфікація

Специфікація Статус
CSS Backgrounds and Borders Module Level 3 Можлива рекомендація
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація
CSS Level 1 Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення .

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

4 7 12 1 9.2 1 1
1 1 6 1

Браузери

У таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.

© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS