How to make a circle in CSS

Learn how to create circles with CSS and an example, including border-radius, box-shadow and more!

Creating a Circle with CSS

Creating a circle in CSS is relatively easy and straightforward. The most common way to do this is to create a square element and then apply a border-radius property that is set to half the width and height of the element to create a circle. To do this, we can use the following code example:

.circle {
  width: 200px;
  height: 200px;
  background: #ccc;
  border-radius: 50%;
}

In this example, we create a square element with a width and height of 200px. We then apply a background color to the element and set the border-radius property to 50%. This will make the element a perfect circle.

We can also use the border-radius property to create more complex shapes. For example, we can use the following code to create an ellipse:

.ellipse {
  width: 200px;
  height: 100px;
  background: #ccc;
  border-radius: 50%/25%;
}

In this example, we create a rectangle element with a width of 200px and a height of 100px. We then apply a background color to the element and set the border-radius property to 50%/25%. This will make the element an ellipse.

There are also other ways to create circles and other shapes in CSS, such as using the clip-path property or SVG elements. However, the most common and easiest way to create circles and other shapes is to use the border-radius property.