I recently had to find out how to do this while working on a site a couple weeks ago and thought I’d share. So, what we’re making is this.
From the above HTML you can see we first create three layers:
- a background (black solid background with rounded corners)
- a stroke (a white circle)
- another inner-circle with a number in it (black circle inside of the white one
There are essentially three layers here. The background is an obvious one. The stroke is a white background <div> that is made into a circle with border-radius and some padding. This allows us to fit the inner circle (also a <div> made into a circle) into the previous white circle which creates the illusion of a stroke with some padding. So, black square, white circle (with padding), black circle.
You can fiddle with this.