CSS circles

You’ve probably heard you can make circles with CSS, but I’ve recently come across a few nice design ideas using them.

First, let’s build the HTML.

Next, let’s create the CSS code:

And we’ll see the output:






Now let’s learn how we got there. The HTML is pretty simple, nested divs, one for the outer circle and one for the inner circle. Next in both we set the color, and hardcode the width and height. The circle is made using the border-radius property. We set this is set in both, along with both browser specific versions to turn the divs into circles. Then to center the inner div we use a newer css property called┬áThe Flexbox Layout or Flexible Box module. To center vertically, we add: align-items:center; and for horizontally it’s┬ájustify-content: center; The same properties we added to the inner div as well to center the text.

Here’s a jsfiddle link so you can try playing with the code right away!