<div class="wrapper">
  <div class="small-bg"></div>
  <div class="large-bg">I've got a Border Radius of 100px.</div>
  <div class="large-circle-bg">I've got a Border Radius of 100%, but a circle SVG background.</div>
  <div class="border"></div>
</div>

.wrapper {
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
  div {
  width: 400px;
  height: 400px;
  margin: 20px;
  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' viewBox='0 0 400 400' fill='none' rx='100' ry='100' stroke='%23FF6900' opacity='0.9' stroke-width='4' stroke-dasharray='3%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    &.large-bg {
      border-radius: 100px;
    }
  &.small-bg {
    width: 200px;
    height: 200px;
  }
    &.large-circle-bg {
      border-radius: 100%;
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='50%25' cy='50%25' viewBox='0 0 400 400' fill='none' r='50%' stroke='%23FF6900' opacity='0.9' stroke-width='4' stroke-dasharray='3%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    }
  &.border {
    background-image: none;
    border-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' rx='100' ry='100' stroke='%23FF6900' opacity='0.9' stroke-width='4' stroke-dasharray='3%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  }
}
}