<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.