Как сделать пунктирную линию для кнопки?

Question

[Cheizer]

Подскажите пожалуйста, как сделать пунктирную линию по краю блока? В данном примере кнопки.
Стиль border-style: dashed не подходит, по причине невозможности управлять шириной и расстоянием между линиями.
Использую background-image + svg

background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill: none; stroke: white; stroke-width: 2; stroke-dasharray:7 5'/></svg>");

Но в этом варианте не работает border-radius, пропадают линии на скруглении.


Подскажите пожалуйста, как можно реализовать пунктирную линию по краю блока?
В результате должно быть так

но не получается так :(

Answer 1

[RAX7]

Answer 2

[Юрий]

В вашем варианте с svg можно добавить rx='20':



Будет тоже не идеально, но ближе к нужному результату.

Comments

[Cheizer]

Благодарю, одно плохо, если текст в две строки например, по краям опять пропадают пунктиры :(

[FabiBoom]

Роман Кузнецов, у псевдоэлемента уберите border-radius