How to create a circle using Pure CSS?

#css

You can create a circle using pure CSS. 🔥

TL;DR

/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}

If you want a clearer explanation read on. 🚀

First, let's create a square shape in CSS using the same width and height since a square has width = height.

Let's say both width and height to be 100px like this,

/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
}

Now let's give a simple background color of red like this,

/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
}

Now all we have to do is set the border radius to 50% or greater so that it is converted to a perfect circle. It can be done like this,

/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}

That's it! You have made a circle shape 😃.

See the code live in JSBin.

To make an even smaller circle change the width and height to a much smaller pixel value.

Let's say we want a circle to be 10px in width and height. It can be done like this,

/* Much smaller Circle in pure CSS */
.circle {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}

DEV Community