Назад Вперед Зміст


Рамки border

Рамки характеризуються трьома параметрами:

  1. Товщиною (властивість border-width),
  2. Типом (властивість border-style),
  3. Кольором (властивість border-color)

Всі три параметри потрібно вказувати. Значень за замовчуванням немає.

Товщина рамки — властивість border-width

Як значення властивості border-width через пробіл вказується товщина рамки з кожного боку за годинниковою стрілкою.

Спочатку вказується рамка зверху, потім — справа, далі — знизу, і останньою — зліва.

Якщо вказано лише одне значення, воно застосовується до рамок з усіх чотирьох боків.

Товщина рамки може приймати одне з трьох значень: thin (тонка), medium (середня) або thick (товста), або задаватись у будь-яких одиницях вимірювання.

Тип рамки — властивість border-style

Тип рамки задається властивістю border-style, у якій через пробіл перелічуються варіанти оформлення рамки.

Першою вказується рамка зверху, потім — справа, далі — знизу, і останньою — зліва.

Якщо вказано лише одне значення, воно застосовується до рамок з усіх чотирьох боків.

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

Колір рамки — властивість border-color

Як значення властивості border-color вказується колір рамок з усіх боків у вигляді:

  1. назви кольору. Наприклад, border-color: red
  2. шістнадцятковий номер кольору. Наприклад,
  3. border-color: #20B2AA;
  4. перелічення компонент RGB. Наприклад, border-color: rgb(100%, 75%, 50%)

Якщо вказано лише одне значення, воно застосовується до рамок з усіх чотирьох боків.

Приклад

Нехай потрібно зробити різні рамки навколо двох абзаців:

Позначимо в документі ці абзаци ідентифікаторами X та Y:

В таблиці стилів для цих елементів опишемо такі рамки:


Назад Вперед Зміст