How can circles be created using pure CSS styling?

You see circles everywhere on the web: avatars, badges, donut charts, and animated loaders. The good news is that you do not need images or SVG to make most of them. Modern CSS gives you several clean, accessible ways to draw perfect circles and even animate them. Here is a community-style question and a practical deep dive into the common patterns developers use in production.

How can circles be created using pure CSS styling?

I want to render circles without images or SVG. Ideally I’d like patterns for:

• Solid circles of fixed and responsive sizes
• Circular profile pictures and background-image circles
• Donut rings, progress arcs, and dashed rings
• Centering content inside circles and common pitfalls to avoid

Code samples would be great. Thanks!

You can build circles with CSS using border-radius, aspect-ratio, gradients, masks, and a little layout help from Flexbox or Grid. Below are the core patterns.

Start from a square box and round it fully:

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #4f46e5;
}Code language: CSS (css)

Use the aspect-ratio property to keep a perfect 1:1 ratio at any width:

.circle-responsive {
  width: min(40vmin, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #60a5fa, #2563eb);
}Code language: CSS (css)

Turn any image into a circle that covers its box:

img.avatar {
  width: 120px;        /* or any responsive width */
  height: 120px;
  border-radius: 50%;
  object-fit: cover;   /* fills the circle without distortion */
}Code language: CSS (css)

Or use a container for flexible layouts:

.avatar-wrap {
  width: 10rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.avatar-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}Code language: CSS (css)

Instead of an img tag, you can put the photo as a background. Combine border-radius with background-size: cover. For more background sizing techniques see 6 ways to stretch a background image with CSS.

.avatar-bg {
  width: 144px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("avatar.jpg") center/cover no-repeat;
}Code language: CSS (css)

Conic gradients draw circular slices. A mask punches out the hole to make a ring.

.ring {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#22c55e 72%, #e5e7eb 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 10px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(50% - 10px), #000 0);
}Code language: CSS (css)

To animate a loader, rotate the element:

@keyframes spin { to { transform: rotate(1turn); } }
.loader {
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#3b82f6 10%, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 6px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(50% - 6px), #000 0);
  animation: spin 0.9s linear infinite;
}Code language: CSS (css)

Use conic-gradient to create repeating dashes around a ring:

dashed-ring {
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(#111 0 12deg, transparent 12deg 24deg) center/100% 100% no-repeat;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 8px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(50% - 8px), #000 0);
}Code language: CSS (css)

Flexbox and Grid make this trivial. For a deeper refresher on centering techniques, check out image align and centering with HTML and CSS.

.centered-circle {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #111827;
  color: white;
  display: grid;
  place-items: center;   /* centers both axes */
}Code language: CSS (css)

• Ellipses instead of circles: Ensure equal width and height or use aspect-ratio: 1.
• Blurry edges: Avoid fractional pixel sizes for borders and masks when possible.
• Overflow: Apply overflow: hidden to circle containers that hold images.
• Accessibility: Don’t rely on color-only circular badges; include text or aria labels.

After you get CSS circles working locally, you might want to deliver uniformly cropped circular avatars directly from a media pipeline. For example, Cloudinary can crop and round images at the URL level so your frontend only applies a simple img tag:

<img src="https://res.cloudinary.com/demo/image/upload/c_fill,w_200,h_200,r_max,f_auto,q_auto/sample.jpg"
  alt="Circular avatar"
/>Code language: HTML, XML (xml)

The transformation fills a 200 by 200 square and applies a maximum border radius to return a circle. With f_auto and q_auto you get automatic format and quality selection, which often means modern formats like WebP when supported. If you want a refresher on format choices for avatars and UI imagery, see JPEG vs WebP.

• Make a circle by setting border-radius: 50% on a square box or using aspect-ratio: 1.
• For avatars, combine border-radius with object-fit: cover or a background image.
• Use conic-gradient plus masking to build donut rings, progress arcs, and dashed rings.
• Center content with Grid or Flexbox and mind accessibility and performance.

• Convert images to WebP
• PNG to WebP
• Image upscaling
• Background remover

Ready to optimize how you create and deliver circular images and UI graphics at scale? Sign up for a free Cloudinary account and start transforming media on the fly.