Пунктирная SVG прямоугольник в качестве фона 100% родительских размеров

Question

Как мне нарисовать пунктирный прямоугольник без обрезки?

Мой случай:

.button{
  position: relative;
  background: #CE3900;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 30px;
  color: #FC961E;
}

.button:after{
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);;
  background: #ffffff22 url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><rect rx='20px' width='100%' height='100%' style='fill: none; stroke: %23FC961E; stroke-width: 4px; stroke-dasharray: 4 12; stroke-linecap: round'/></svg>") no-repeat;
  }

<div class="button">I am button</div>

Вы видите, что ширина штриха обрезается пополам. Как я могу решить эту проблему?

Answer 1

.button{
  position: relative;
  background: #CE3900;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 30px;
  color: #FC961E;
}

.button:after{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);;
  background: #ffffff22;
  border: 3px dashed orange;
  border-radius: 30px;
  }

<div class="button">I am button</div>

Вы действительно должны использовать SVG? или не могли бы вы сделать что-то подобное?

<div class="button">I am button</div>


.button{
  position: relative;
  background: #CE3900;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 30px;
  color: #FC961E;
}

.button:after{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);;
  background: #ffffff22;
  border: 3px dashed orange;
  border-radius: 30px;
  }

Answer 2

Это мое решение https://jsfiddle.net/1t4qgrbs/. Но я не уверен, что это правильное решение

.button{
  position: relative;
  background: #CE3900;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 30px;
  color: #FC961E;
}

.button:after{
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);;
  background: #ffffff22 url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><rect rx='20px' width='100%' height='100%' x='2' y='2' style='width: calc(100% - 4px); height: calc(100% - 4px); fill: none; stroke: %23FC961E; stroke-width: 4px; stroke-dasharray: 4 12; stroke-linecap: round'/></svg>") no-repeat;
}

<div class="button">I am button</div>

Answer 3

Просто используйте

border: 3px dashed red

, это создаст кнопку, в которой вам не нужно использовать SVG, этот подход удобен для рендеринга DOM и позволяет выполнять ту же работу за меньшее количество строк кода