Длина штриха в border-style: dashed. Возможно ли регулировать?

#html #css #svg

Нужно сделать блок с такой обводкой



Но если использовать border: 2px dashed #15acd3, то получается так:



Возможно ли через CSS задавать как длину штриха и отступы между штриками?
    

Ответы

Ответ 1

background-image с SVG. Регулировать расстояния между черточкам нужно в свойстве
stroke-dasharray.


  Источник: stroke-dasharray




.block {
  width: 200px;
  height: 100px;
  background-color: #999;
  background-image: url("data:image/svg+xml;utf8,");
}



Ответ 2

К сожалению, этого нельзя сделать. Но, если вам хочется кастомный бордер, то можно
использовать вариант с картинкой: 

border-style: solid;
border-width: 2px;
border-image: url('borderImageURL') 2 fill repeat;


Не забудьте про вендорные префиксы для свойства border-imagе, если нужна повышенная
кросбраузерность.