Урок 93 із 239
39%
← Назад

Основи роботи з межами в CSS

Вивчаємо, як створювати межі елементів за допомогою властивостей border-width, border-style і border-color.

Основи роботи з межами в CSS

Межа (border) дозволяє виділити елемент на сторінці. Для створення межі потрібно задати її товщину, стиль і колір.

Для цього використовуються три основні властивості:

  • border-width — задає товщину межі.
  • border-style — задає тип межі.
  • border-color — задає колір межі.

Без властивості border-style межа не відобразиться, навіть якщо задано товщину та колір.

Приклад

<div id="elem"></div>
#elem {
  width: 300px;
  height: 100px;

  border-width: 3px;
  border-style: solid;
  border-color: red;
}

У результаті елемент отримає суцільну червону межу товщиною 3 пікселі.

❗ Важливо:

Властивість border-style є обов'язковою. Якщо її не вказати, межа не буде показана.

Найпоширеніші значення border-style

  • solid — суцільна лінія.
  • dashed — пунктир.
  • dotted — крапкова лінія.
  • double — подвійна лінія.
  • none — межа відсутня.

Практичні завдання

📌 Завдання:
  1. №1
  3. Створіть блок розміром 300×100 пікселів.
  5. Задайте йому:
  6. - товщину межі 2px;
  7. - суцільний стиль;
  8. - синій колір межі.
💡 Показати підказку

Використайте властивості border-width, border-style та border-color.

✅ Показати відповідь
#elem {
  width: 300px;
  height: 100px;

  border-width: 2px;
  border-style: solid;
  border-color: blue;
}
📌 Завдання:
  1. №2
  3. Створіть блок розміром 250×120 пікселів.
  5. Задайте йому:
  6. - товщину межі 5px;
  7. - пунктирний стиль;
  8. - зелений колір межі.
💡 Показати підказку

Для пунктирної межі використовуйте значення dashed.

✅ Показати відповідь
#elem {
  width: 250px;
  height: 120px;

  border-width: 5px;
  border-style: dashed;
  border-color: green;
}