Межі окремих сторін в CSS

Вивчаємо властивості border-left, border-right, border-top та border-bottom для створення меж окремих сторін елемента.

Межі окремих сторін в CSS

У CSS існують скорочені властивості для окремих сторін елемента: border-left (ліва межа), border-right (права межа), border-top (верхня межа) та border-bottom (нижня межа).

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

<div id="elem"></div>

#elem {
  width: 300px;
  height: 100px;
  border-left: 1px solid red;
}

Можна одночасно додати межі з декількох сторін елемента.

#elem {
  width: 300px;
  height: 100px;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

❗ Важливо:

Властивості border-left, border-right, border-top та border-bottom мають такий самий формат, як і border: товщина, стиль та колір.

border-left — ліва межа
border-right — права межа
border-top — верхня межа
border-bottom — нижня межа

📌 Завдання:

№1. Створіть блок та додайте йому тільки верхню межу.
№2. Додайте нижню межу іншого кольору.
№3. Створіть елемент з лівою та правою межами одночасно.

💡 Показати підказку

Спробуйте змінити стиль межі з solid на dashed або double.