How to create a stroke around a number with CSS

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.

Screen Shot 2014-10-26 at 9.25.07 PM

HTML

From the above HTML you can see we first create three layers:

  1. a background (black solid background with rounded corners)
  2. a stroke (a white circle)
  3. another inner-circle with a number in it (black circle inside of the white one

CSS

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.

Leave a Reply