border - color

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

Коротка інформація

CSS | CSS1, CSS2.1
Значення за умовчанням | Ні
Наслідує | Ні
Застосовується | До усіх елементів
Аналог HTML | <img border> | <table border>
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/box.html#propdef - border - color

Опис

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

Синтаксис

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

Значення

Колір можна задавати трьома способами.

1. По його назві

Браузери підтримують деякі кольори по їх назві.

2. По шістнадцятиричному значенню

Для завдання кольорів використовуються числа в шістнадцятиричному коді. Шістнадцятирична система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифри від 10 до 15 замінені латинськими буквами. Числа більше 15 в шістнадцятиричній системі утворюються об'єднанням двох чисел в одно. Наприклад, числу 255 в десятковій системі відповідає число FF в шістнадцятиричній системі. Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятиричним числом ставлять символ грат #, наприклад #666999. Кожен з трьох кольорів - червоний, зелений і синій - може набувати значень від 00 до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb, де перші два символи відмічають червону компоненту кольору, два середніх - зелену, а два останніх - синю. Допускається використовувати скорочену форму виду #rgb, де кожен символ слід подвоювати. Так, запис #fe0 слід розцінювати як #ffee00.

3. За допомогою RGB

Можна визначити колір використовуючи значення червоною, зеленою і синій складовій в десятковому численні. Значення кожного з трьох кольорів може набувати значень від 0 до 255. Також можна задавати колір в процентному відношенні.

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

inherit Наслідує значення батька.

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

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

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>border - color</title>

<style type="text/css">

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.

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

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

[window.]document.getElementById("elementID") style.borderColor

Браузери

Internet Explorer 6 не підтримує значення transparent. Браузер Internet Explorer до сьомої версії включно не підтримує inherit.

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