CSS: dots in corners of div

I'm trying to put a dot in each corner of a container. I'm thinking the trick to this is a combination of .my-container:before and setting the :before's border or background property. The effect I want is similar to SO#17306087, but I don't want to use images.

Edit

jsfiddle

I'll be using this quite a bit, so would prefer it to happen automatically with a css class (not require additional DOM elements).

Edit

Since svg is text-based and can be inserted directly into css, I'm looking into that method. I see here that this does work: example fiddle

my updated fiddle (currently has a css error that I'm trying to pin-point) fixed fiddle with 4 dots using background prop

The svg is valid and not throwing errors as DOM: fiddle

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);

updated fiddle