Как сделать пунктирную рамку

Короткий ответ

Второе слово в border — стиль линии:

<div style="border: 2px dashed gray; padding: 12px;">Dashed border</div>

Другие стили

<style>
  .b { padding: 8px; margin-bottom: 6px; border-width: 3px; border-color: teal; }
</style>
 
<div class="b" style="border-style: dotted;">dotted</div>
<div class="b" style="border-style: dashed;">dashed</div>
<div class="b" style="border-style: double;">double</div>
<div class="b" style="border-style: groove;">groove</div>

Зона для перетаскивания

Пунктир часто обозначает место, куда можно что-то положить, например файл:

<label style="display: grid; place-items: center; height: 100px; border: 2px dashed royalblue; border-radius: 12px; background: aliceblue; color: royalblue; cursor: pointer;">
  Drop a photo here or click
  <input type="file" hidden>
</label>

Свой размер штрихов

Длину штрихов и промежутков в border настроить нельзя — их выбирает браузер. Если нужен точный рисунок, используют фон с градиентом или SVG-картинку вместо рамки.

Частая ошибка

Задают только border-width и border-color без стиля и не видят рамки. Без стиля рамка не рисуется: по умолчанию он none. Короткая запись border: 2px dashed gray задаёт всё сразу.

Спасибо, что читаете!