Суцільна рамка в CSS

Вивчаємо значення solid для властивості border-style та створюємо просту суцільну рамку навколо елемента.

Властивість border-style визначає тип рамки. Одним із найпоширеніших значень є solid — суцільна лінія.

Щоб рамка відобразилася, необхідно задати три властивості: товщину (border-width), стиль (border-style) і колір (border-color).

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

#elem {
  width: 300px;
  height: 100px;

  border-width: 1px;
  border-style: solid;
  border-color: black;
}

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

❗ Важливо:

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

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

📌 Завдання:

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

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

✅ Показати відповідь

#elem {
  width: 300px;
  height: 100px;

  border-width: 1px;
  border-style: solid;
  border-color: black;
}