How to use a radial gradient with a border-image - html

Question

I am trying to use a border image where the source is a radial gradient. I have seen plenty of examples with images but have seen none with radial gradients.
Full example in My CodePen
#main {
width: 200px;
border: 8px solid red;
padding: 10px;
border-image:
radial-gradient( farthest-corner, #777 50%, #7770 60%) /* source */
28 / /* slice */
8px 8px 8px 8px / /* width */
4px 4px 4px 4px /* outset */
round; /* repeat */
}
I simply want to surround the box in small circles spaced a few pixels apart preferably using a CSS only solution. Though I am happy to hear other issues

Answer 1

You can do it with background like this:
#main {
width: 200px;
padding:10px;
background:
radial-gradient(circle at center, #777 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-x;
}
<div id="main">This element is surrounded by a radial-gradient-based border image!</div>
If you want all the sides you can do this:
#main {
width: 200px;
padding:13px 10px;
background:
radial-gradient(circle at center, #777 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-y,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom right/10px 10px repeat-y;
}
<div id="main">This element is surrounded by a radial-gradient-based border image!</div>