Властивість border-color

Ця властивість задає колір границі блоку. Якщо потрібно задати різні кольори для чотирьох складових границь, то можна користуватися індивідуальними властивостями:

• border-top-color – колір верхнього сегмента кордону;

• border-right-color – колір правого сегмента кордону;

• border-bottom-color – колір нижнього сегмента кордону;

• border-left-color – колір лівого сегмента кордону.

Значенням індивідуальних властивостей може бути значення кольору, вказане будь-яким доступним в CSS способом:

• ключовим словом (red, yellow, silver и т.д.);

• шістнадцятковим кодом кольору в повній формі (# 00FFCC, # eeddaa) або скорочено (# 0FC, # EDA);

• десятковим кодом в моделі RGB (color: rgb (25, 205, 172)).

Як приклад розфарбуємо сегменти границі блоку в різні кольори:

P { border-top-color: red; border-right-color: #EDA; border-bottom-color: #41A41C; border-left-color: rgb(25, 205, 172) }

Значення властивості border-color, яке є стенографічним, об'єднує значення індивідуальних властивостей. Єдина (але дуже важлива!) відмінність у тому, що в якості значення властивості border-color може використовуватися ключове слово transparent. При цьому межа буде прозорою, але все ж таки буде мати ширину. Це значення не підтримується браузерами фірми Microsoft – в них границя буде мати або колір за замовчуванням (чорний), якщо колір раніше не задавався, або колір, успадкований від батьківського елементу.

Властивість border-style

Ця властивість задає тип ліній, якими будуть відображатися границі блоку. Якщо потрібно задати різні типи ліній для чотирьох складових границь, то можна користуватися індивідуальними властивостями:

• border-top-style – тип лінії верхньої границі;

• border-right-style – тип лінії правої границі;

• border-bottom-style – тип лінії нижньої границі;

• border-left-style – тип лінії лівої границі.

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

• none – границя відсутня, в результаті значення властивості border-width також дорівнює нулю. Це значення використовується за умовчанням.

• hidden – подібно значенням none, границя відсутня, за винятком тих випадків, коли таке значення буде застосовано для таблиць.

• dotted – границя відображається лінією, складеної з точок.

• dashed – границя відображається пунктирною лінією.

• solid – границя відображається суцільною лінією.

• double – границя відображається подвійною суцільною лінією. Сума значень ширини двох ліній і відстані між ними повинна дорівнювати значенню властивості border-width. Найпоширеніша помилка при використанні цього значення – задати ширину лінії 2 пікселя і стиль double. У цьому випадку неможливо відобразити подвійну лінію, так як мінімальна можлива ширина лінії на екрані монітора – 1 піксель, тому для відображення подвійний лінії і відстані між ними необхідно мінімум 3 пікселі. Відповідно, при ширині в 2 пікселя подвійну лінію відобразити неможливо. У результаті виходить звичайна суцільна лінія, але товщиною в 2 пікселя.

• groove – границя відображається як "втиснула" лінія з імітацією обсягу.

• ridge – протилежно значенню groove. Границя відображається "опуклою" лінією з імітацією об'єму.

• inset – границя відображається так, що весь блок виглядає якби утисненим (схоже на натиснуту кнопку).

• outset – протилежно значенню inset. Весь блок виглядає опуклим.

1. hidden	Подібно значенням none, границя відсутня.
2. dotted	Границя відображається лінією, складеної з точок
3. dashed	Границя відображається пунктирною лінією
4. solid	Границя відображається суцільною лінією
5. double	Границя відображається подвійний суцільною лінією
6. groove	Границя відображається "втисненою" лінією з імітацією об'єму
7. ridge	Границя відображається "опуклою" лінією з імітацією об'єму
8. inset	Границя відображається так, що весь блок виглядає як би втисненим
9. outset	Границя відображається так, що весь блок виглядає як би "випуклим"

Властивість border-style, по аналогії з border-width, дозволяє скорочено записати значення стилів для всіх чотирьох сегментів границі. Допускає задання одного, двох, трьох або чотирьох значень. Застосування цих значень аналогічно властивості border-width.

P { border-style: solid dotted } Стиль верхньої та нижньої границі навколо абзацу буде solid, а для лівої і правої – dotted.