Урок 99 із 239
41%
← Назад

Скорочений запис межі в CSS

Вивчаємо скорочену властивість border для задання товщини, стилю та кольору межі одним рядком.

Скорочений запис межі в CSS

Для меж, як і для шрифтів, існує скорочена властивість border. Вона дозволяє замінити декілька окремих властивостей одним записом.

Замість трьох властивостей border-width, border-style та border-color можна використовувати одну властивість border.

#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Цю саму межу можна записати коротше:

#elem {
  border: 1px solid black;
  width: 300px;
  height: 100px;
}
❗ Важливо:

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

  • 1px — товщина межі (border-width)
  • solid — стиль лінії (border-style)
  • black — колір межі (border-color)

Завдання

📌 Завдання:
  1. №1. Створіть блок розміром 300px на 100px та додайте йому межу через властивість border.
  2. №2. Змініть товщину межі.
  3. №3. Використайте різні стилі межі: dashed, dotted, double.
  4. №4. Змініть колір межі.
💡 Показати підказку

Спробуйте змінювати лише одне значення у властивості border та спостерігайте за результатом.