How to Make a Circle with CSS

Want a perfect circle in CSS? Here are two simple ways to build it, fixed-size or responsive, plus how to center content inside and a quick accessibility tip.

Live Preview: Circle

Method 1: Fixed-Size Circle

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

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

Method 2: Responsive Circle

.circle-responsive {
  width: min(40vw, 240px);
  aspect-ratio: 1 / 1; /* stays a square at any width */
  background: #cd5454;
  border-radius: 50%;
}

.circle-responsive {
  width: min(40vw, 240px);
  aspect-ratio: 1 / 1; /* stays a square at any width */
  background: #cd5454;
  border-radius: 50%;
}

How This Works

A circle is just a square with border-radius set to 50%. In Method 1, fixed width and height ensure a square box that rounds perfectly into a circle.

In Method 2, aspect-ratio: 1 / 1 keeps the element square while the width adapts to the viewport, so the circle scales responsively.

How to Center Content Inside a Circle

The easiest approaches are Flexbox or Grid. Add these properties to the same circle rule to perfectly center any text or icon inside.

Method 1: Use CSS Flexbox

.circle {
  width: 140px;
  height: 140px;
  background: #cd5454;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 140px;
  height: 140px;
  background: #cd5454;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

.circle {
  width: 140px;
  height: 140px;
  background: #cd5454;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.circle {
  width: 140px;
  height: 140px;
  background: #cd5454;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

When to Use Each Shape Method

Use the fixed-size circle when you need a precise, consistent size (e.g., avatars or badges). Choose the responsive circle when the layout is fluid and should scale across devices; just note older browsers without aspect-ratio support may need a padding-top fallback.

Quick Customizations

Change the color with background: yourColor; or add a border and shadow like border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15);. To resize, adjust width/height (fixed) or tweak the responsive width value.

Accessibility & SEO

If the circle is purely decorative, hide it from assistive tech with aria-hidden=”true”.

If the circle conveys meaning as a non-interactive graphic, don’t rely on aria-label alone on a generic div, add an appropriate role. Use role=”img” with aria-label or aria-labelledby, or provide nearby/visually hidden text.

<div class="circle" role="img" aria-label="Online status"></div>

<div class="circle" role="img" aria-label="Online status"></div>

If the circle is interactive (e.g., opens a profile), use a semantic element like a button and give it an accessible name.

<button class="circle" aria-label="Open profile"></button>

<button class="circle" aria-label="Open profile"></button>