You can do it only on a div and with standard CSS.
The trick is to use the pseudo elements to display 2 circles using radial gradients.
.test1 {
width: 200px;
height: 200px;
background-color: lightblue;
position: absolute;
left: 220px;
}
.test1:before, .test1:after {
content: "";
position: absolute;
height: 100%;
width: 20px;
top: 0px;
background-image: radial-gradient(circle at center, red 5px, transparent 5px), radial-gradient(circle at center, red 5px, transparent 5px);
background-size: 20px 20px;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.test1:before {
left: 0px;
}
.test1:after {
right: 0px;
}
fiddle
You could also draw the circles in the elements itself, but then you can not apply it to elements having background.
The above code renders the circles pixelated. It's better leaving 1 pixel for the red/transparent transition
background-image: radial-gradient(circle at center, red 5px, transparent 6px), radial-gradient(circle at center, red 5px, transparent 6px);