Draw a circle with CSS

Two approaches come to mind so far.

Border-Radius

This is on the element itself and is very common.

border-radius: 50%;
height: 100px;
width: 100px;

Background

Use radial gradient to get a circular diffused background, and then set the appropriate size to get an approximate circular effect.

background: radial-gradient(circle,#f00 47%,transparent 48%) 2px center/6px 6px no-repeat;

Note that it is not a perfect circle, so it should not be too large. One use case is for long text to display a list-like effect:

The complete code is as follows:

background: radial-gradient(circle,#f00 47%,transparent 48%) 2px center/6px 6px no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-left: 10px;

*Update: *This kind of effect is not good, it is recommended to use list-style-imagesvg to achieve it.