How to Create a Circle in CSS: Simple Steps and Examples

To create a circle in CSS, set equal width and height on an element and apply border-radius: 50%. This rounds the corners fully, making the shape a circle.

Syntax

To make a circle, you need three CSS properties:

• width: sets the circle's width.
• height: sets the circle's height (must be equal to width).
• border-radius: set to 50% to round the shape into a circle.

css

selector {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Example

This example shows a red circle with 150px diameter centered on the page.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.circle {
  width: 150px;
  height: 150px;
  background-color: red;
  border-radius: 50%;
}

Output

A red circle with diameter 150px centered on a light gray background.

Common Pitfalls

Common mistakes when creating circles in CSS include:

• Setting width and height to different values, which creates an oval, not a circle.
• Forgetting to set border-radius to 50%, which keeps the shape rectangular.
• Using pixel values for border-radius that are too small or too large, which won't create a perfect circle.

css

/* Wrong: width and height differ, so shape is oval */
.oval {
  width: 150px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

/* Correct: equal width and height for circle */
.circle {
  width: 150px;
  height: 150px;
  background-color: blue;
  border-radius: 50%;
}

Quick Reference

Property	Value	Purpose
width	equal to height (e.g., 100px)	Sets circle width
height	equal to width (e.g., 100px)	Sets circle height
border-radius	50%	Rounds corners to make circle

Key Takeaways

Set equal width and height to create a square base for the circle.

Use border-radius: 50% to round the square into a perfect circle.

Different width and height values create ovals, not circles.

Use background-color to see the circle shape clearly.

Center circles with flexbox for neat layout.