Пунктирна рамка в CSS

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

Пунктирна рамка в CSS

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

Щоб рамка відобразилася, потрібно задати її товщину, стиль і колір.

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

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

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

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

❗ Важливо:

Стиль dotted працює лише тоді, коли задано border-style. Якщо вказати тільки товщину та колір рамки, вона не з'явиться.

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

📌 Завдання:

№1
Створіть блок розміром 300×100 пікселів.
Додайте йому чорну рамку у вигляді точок товщиною 1px.

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

Використайте border-width, border-style зі значенням dotted та border-color.

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

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

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