<div class="a test"></div>
<div class="a test2"></div>
<div class="a test3"></div>
<div class="a test4"></div>
body {
  display: flex;
  gap: 1rem;
}
.test {
  width: 25%;
  aspect-ratio: 1;
  border: 10px solid transparent;
  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")
    100% round;
  border-image-width: 50%;
  background: orange;
  border-radius: 50%;
}

.test2 {
  width: 25%;
  aspect-ratio: 1;
  border: 20px solid transparent;
  border-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")
    round;
  border-image-width: 50%;
  background: orange;
  border-radius: 50%;
}

.test3 {
  width: 25%;
  aspect-ratio: 1;
  border: 20px solid;
  border-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");
  background: cyan;
  border-radius: 50%;
  border-image-slice: 25% 25% 25% 25%;
  border-image-width: 25% 25% 25% 25%;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: repeat repeat;
}

.test4 {
  width: 25%;
  aspect-ratio: 1;
  border-image-slice: 12 12 12 12;
  border-image-width: 12px 12px 12px 12px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: repeat repeat;
  border-image-source: url("https://mdn.github.io/css-examples/tools/border-image-generator/border-image-5.png");
  border-style: solid;
  background: green;
  border-radius: 50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.