Пунктирна рамка у вигляді тире в CSS

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

Пунктирна рамка у вигляді тире в CSS

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

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

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

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

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

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

❗ Важливо:

Стилі dashed і dotted схожі між собою, але dashed створює тире, а dotted — окремі точки.

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

📌 Завдання:

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

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

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

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

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

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