CSS border dashed - как я могу изменить расстояние между пунктиром? И длину самого пунктира?

Никак не можешь. Только выбрать вид пунктира из предустановленных вариантов.

Но ты можешь, например, использовать для границы произвольное изображение. В том числе и изображение нужного тебе пунктира: https://webref.ru/css/border-image

Или подложить изображение рамки как background.

Или нарисовать рамку скриптом в canvas.

Или создать для элементов рамки собственный иконочный шрифт.

Или вообще сделать цепочку из сотни чередующихся div'ов с разным backgrund...

Можно создать один пунктир с заданными промежутками и повторить его так как надо либо картинкой png, либо svg. Я бы сделал svg, а те кто бредит поддержкой каких то старых браузеров, курите в сторонке, на дворе уже заканчивается второй десяток 21 века.

Для тех кто ищет:
Да ты можешь сделать очень легко dashed лини не используя варианты выше, а так же не создавая десятки дивов, идиотизм, просто создай один див и пропиши такие свойства: .dotted {
background: linear-gradient(to right, #fff 0%, #fff 50%, #000 50%);
background-size: 20px 1px;
color: #ACB2CA;
width: 100%;
height: 1px;
}.
Тем кому не понятно что тут происходит:
мы просто делаем градиент, говорим что бы он шел на право от 0% до 50% белым(наш цвет), а от 50% и до конца блока черным(цвет заднего фона или можно сделать transparent), затем мы получаем сплошную линию 50% на 50%, разбиваем ещё background-size'ом на 20px с шириной 1px, растягиваем див на 100%. Готово, можем сувать между 2мя блоками и получать линию.

Можно сократить до:
background: linear-gradient(to right, #fff 50%, #000 50%);