Свойства css не поддерживают настройку расстояния между штрихами, но есть несколько вариантов как это обойти.
1 вариант:
Берем картинку png такого вида
картинка весит чуть более 100 байт.
Цвет, прозрачность, длину и ширину промежутков можно изменить в фотошопе.
Код:
.border {
border: dashed 2px #000; /* запасной вариант */
border-image-source: url("путь_к_картинке.png");
border-image-slice: 1; /* толщина бордера */
border-image-repeat: round; /* повторение изображения */
/* короткая запись border-image */
border-image: url("путь_к_картинке.png") 2 round;
}
2 вариант.
Используем svg картинку в качестве фонового изображения.
Помимо изменения расстояния между штрихами, можно закруглить углы.
Сгенерированное изображение SVG является векторным и заполняет ширину и высоту элементов на 100%
Набрав в поиске «генератор штрихов border css» (вот пример: https://kovart.github.io/dashed-border-generator/) вы найдете сайты, на которых можно легко сгенерировать необходимый бордер.
Пример использования:
.block {
width: 100px;
height: 100px;
/* dashed border */
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
Можно и самим поиграться с основными свойствами:
stroke - цвет линий
stroke-width – толщина штриха
закругленные углы можно задать простым border-radius