I have been experimenting with different methods to increase the distance between border strokes on my element. So far, I have tried various approaches without success.
For example, I explored this resource
Unfortunately, the issue arises when I incorporate border-radius into the styling.
You can view my current implementation in this JSFiddle
#border {
width: 250px;
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue
50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%),
linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
background-position: top, right, bottom, left;
background-repeat: repeat-x, repeat-y;
background-size: 10px 1px, 1px 10px;
border-radius: 30px;
}