{"id":39739,"date":"2026-01-24T01:59:27","date_gmt":"2026-01-24T09:59:27","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39739"},"modified":"2026-01-24T01:59:28","modified_gmt":"2026-01-24T09:59:28","slug":"how-can-circles-be-created-using-pure-css-styling","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling","title":{"rendered":"How can circles be created using pure CSS styling?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Question:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>How can circles be created using pure CSS styling?<\/em><br><br><em>I want to render circles without images or SVG. Ideally I\u2019d like patterns for:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Solid circles of fixed and responsive sizes<\/li>\n\n\n\n<li>Circular profile pictures and background-image circles<\/li>\n\n\n\n<li>Donut rings, progress arcs, and dashed rings<\/li>\n\n\n\n<li>Centering content inside circles and common pitfalls to avoid<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Code samples would be great. Thanks!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Answer:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1) Solid circle with border-radius<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start from a square box and round it fully:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.circle<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">120px<\/span>;\n\u00a0 <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">120px<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#4f46e5<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">2) Responsive circle with aspect-ratio<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use the aspect-ratio property to keep a perfect 1:1 ratio at any width:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.circle-responsive<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-built_in\">min<\/span>(<span class=\"hljs-number\">40vmin<\/span>, <span class=\"hljs-number\">300px<\/span>);\n\u00a0 <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">radial-gradient<\/span>(circle at <span class=\"hljs-number\">35%<\/span> <span class=\"hljs-number\">35%<\/span>, #<span class=\"hljs-number\">60<\/span>a5fa, #<span class=\"hljs-number\">2563<\/span>eb);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">3) Circular profile pictures with object-fit<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Turn any image into a circle that covers its box:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">img<\/span><span class=\"hljs-selector-class\">.avatar<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">120px<\/span>;\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/* or any responsive width *\/<\/span>\n\u00a0 <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">120px<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">object-fit<\/span>: cover; \u00a0 <span class=\"hljs-comment\">\/* fills the circle without distortion *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Or use a container for flexible layouts:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.avatar-wrap<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">10rem<\/span>;\n\u00a0 <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n}\n<span class=\"hljs-selector-class\">.avatar-wrap<\/span> &gt; <span class=\"hljs-selector-tag\">img<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">object-fit<\/span>: cover;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">4) Circles with background-image<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/6-ways-to-stretch-a-background-image-with-css\">6 ways to stretch a background image with CSS<\/a>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.avatar-bg<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">144px<\/span>;\n\u00a0 <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">\"avatar.jpg\"<\/span>) center\/cover no-repeat;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">5) Donut rings and progress arcs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Conic gradients draw circular slices. A mask punches out the hole to make a ring.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.ring<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">160px<\/span>;\n\u00a0 <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">conic-gradient<\/span>(#<span class=\"hljs-number\">22<\/span>c55e <span class=\"hljs-number\">72%<\/span>, #e5e7eb <span class=\"hljs-number\">0<\/span>);\n\u00a0 <span class=\"hljs-attribute\">-webkit-mask<\/span>: <span class=\"hljs-built_in\">radial-gradient<\/span>(farthest-side, transparent calc(<span class=\"hljs-number\">50%<\/span> - <span class=\"hljs-number\">10px<\/span>), <span class=\"hljs-number\">#000<\/span> <span class=\"hljs-number\">0<\/span>);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attribute\">mask<\/span>: <span class=\"hljs-built_in\">radial-gradient<\/span>(farthest-side, transparent calc(<span class=\"hljs-number\">50%<\/span> - <span class=\"hljs-number\">10px<\/span>), <span class=\"hljs-number\">#000<\/span> <span class=\"hljs-number\">0<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">To animate a loader, rotate the element:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-keyword\">@keyframes<\/span> spin { <span class=\"hljs-selector-tag\">to<\/span> { <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">1turn<\/span>); } }\n<span class=\"hljs-selector-class\">.loader<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">64px<\/span>;\n\u00a0 <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">conic-gradient<\/span>(#<span class=\"hljs-number\">3<\/span>b82f6 <span class=\"hljs-number\">10%<\/span>, transparent <span class=\"hljs-number\">0<\/span>);\n\u00a0 <span class=\"hljs-attribute\">-webkit-mask<\/span>: <span class=\"hljs-built_in\">radial-gradient<\/span>(farthest-side, transparent calc(<span class=\"hljs-number\">50%<\/span> - <span class=\"hljs-number\">6px<\/span>), <span class=\"hljs-number\">#000<\/span> <span class=\"hljs-number\">0<\/span>);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attribute\">mask<\/span>: <span class=\"hljs-built_in\">radial-gradient<\/span>(farthest-side, transparent calc(<span class=\"hljs-number\">50%<\/span> - <span class=\"hljs-number\">6px<\/span>), <span class=\"hljs-number\">#000<\/span> <span class=\"hljs-number\">0<\/span>);\n\u00a0 <span class=\"hljs-attribute\">animation<\/span>: spin <span class=\"hljs-number\">0.9s<\/span> linear infinite;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">6) Dashed or dotted circular borders<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use conic-gradient to create repeating dashes around a ring:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">dashed-ring<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">140px<\/span>;\n\u00a0 <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">background<\/span>:\n\u00a0 \u00a0 <span class=\"hljs-built_in\">conic-gradient<\/span>(#<span class=\"hljs-number\">111<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">12deg<\/span>, transparent <span class=\"hljs-number\">12deg<\/span> <span class=\"hljs-number\">24deg<\/span>) center\/<span class=\"hljs-number\">100%<\/span> <span class=\"hljs-number\">100%<\/span> no-repeat;\n\u00a0 <span class=\"hljs-attribute\">-webkit-mask<\/span>: <span class=\"hljs-built_in\">radial-gradient<\/span>(farthest-side, transparent calc(<span class=\"hljs-number\">50%<\/span> - <span class=\"hljs-number\">8px<\/span>), <span class=\"hljs-number\">#000<\/span> <span class=\"hljs-number\">0<\/span>);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attribute\">mask<\/span>: <span class=\"hljs-built_in\">radial-gradient<\/span>(farthest-side, transparent calc(<span class=\"hljs-number\">50%<\/span> - <span class=\"hljs-number\">8px<\/span>), <span class=\"hljs-number\">#000<\/span> <span class=\"hljs-number\">0<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">7) Centering content inside a circle<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Flexbox and Grid make this trivial. For a deeper refresher on centering techniques, check out <a href=\"https:\/\/cloudinary.com\/guides\/image-effects\/image-align-centering-with-html-and-css\">image align and centering with HTML and CSS<\/a>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.centered-circle<\/span> {\n\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">120px<\/span>;\n\u00a0 <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n\u00a0 <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\u00a0 <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#111827<\/span>;\n\u00a0 <span class=\"hljs-attribute\">color<\/span>: white;\n\u00a0 <span class=\"hljs-attribute\">display<\/span>: grid;\n\u00a0 <span class=\"hljs-attribute\">place-items<\/span>: center; \u00a0 <span class=\"hljs-comment\">\/* centers both axes *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Common pitfalls<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ellipses instead of circles:<\/strong> Ensure equal width and height or use <code>aspect-ratio: 1<\/code>.<\/li>\n\n\n\n<li><strong>Blurry edges:<\/strong> Avoid fractional pixel sizes for borders and masks when possible.<\/li>\n\n\n\n<li><strong>Overflow:<\/strong> Apply overflow: hidden to circle containers that hold images.<\/li>\n\n\n\n<li><strong>Accessibility:<\/strong> Don\u2019t rely on color-only circular badges; include text or aria labels.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Optional: Managing circular images at scale with Cloud services<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_fill,w_200,h_200,r_max,f_auto,q_auto\/sample.jpg\"<\/span>\n  <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Circular avatar\"<\/span>\n\/&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">The transformation fills a 200 by 200 square and applies a maximum border radius to return a circle. With <code>f_auto<\/code> and <code>q_auto<\/code> 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 <a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/jpeg-vs-webp\">JPEG vs WebP<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">TL;DR<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make a circle by setting <code>border-radius: 50%<\/code> on a square box or using <code>aspect-ratio: 1<\/code>.<\/li>\n\n\n\n<li>For avatars, combine border-radius with object-fit: cover or a background image.<\/li>\n\n\n\n<li>Use <code>conic-gradient<\/code> plus masking to build donut rings, progress arcs, and dashed rings.<\/li>\n\n\n\n<li>Center content with Grid or Flexbox and mind accessibility and performance.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn More<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cloudinary.com\/tools\/image-to-webp\">Convert images to WebP<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/tools\/png-to-webp\">PNG to WebP<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/tools\/image-upscale\">Image upscaling<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/background-remover\">Background remover<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ready to optimize how you create and deliver circular images and UI graphics at scale? <a href=\"https:\/\/cloudinary.com\/users\/register_free\">Sign up for a free Cloudinary account<\/a> and start transforming media on the fly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":88,"featured_media":39726,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[423],"class_list":["post-39739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-questions"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.3 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How can circles be created using pure CSS styling?<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can circles be created using pure CSS styling?\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-24T09:59:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-24T09:59:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"damjanantevski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling\"},\"author\":{\"name\":\"damjanantevski\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#\\\/schema\\\/person\\\/43592e43c12520a1e867d456b1e8cf7e\"},\"headline\":\"How can circles be created using pure CSS styling?\",\"datePublished\":\"2026-01-24T09:59:27+00:00\",\"dateModified\":\"2026-01-24T09:59:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling\"},\"wordCount\":554,\"publisher\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/res.cloudinary.com\\\/cloudinary-marketing\\\/images\\\/f_auto,q_auto\\\/v1769222068\\\/css_featured_image\\\/css_featured_image.jpg?_i=AA\",\"keywords\":[\"Questions\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling\",\"url\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling\",\"name\":\"How can circles be created using pure CSS styling?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/res.cloudinary.com\\\/cloudinary-marketing\\\/images\\\/f_auto,q_auto\\\/v1769222068\\\/css_featured_image\\\/css_featured_image.jpg?_i=AA\",\"datePublished\":\"2026-01-24T09:59:27+00:00\",\"dateModified\":\"2026-01-24T09:59:28+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling#primaryimage\",\"url\":\"https:\\\/\\\/res.cloudinary.com\\\/cloudinary-marketing\\\/images\\\/f_auto,q_auto\\\/v1769222068\\\/css_featured_image\\\/css_featured_image.jpg?_i=AA\",\"contentUrl\":\"https:\\\/\\\/res.cloudinary.com\\\/cloudinary-marketing\\\/images\\\/f_auto,q_auto\\\/v1769222068\\\/css_featured_image\\\/css_featured_image.jpg?_i=AA\",\"width\":1200,\"height\":630,\"caption\":\"CSS featured image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/questions\\\/how-can-circles-be-created-using-pure-css-styling#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/cloudinary.com\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can circles be created using pure CSS styling?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/res.cloudinary.com\\\/cloudinary-marketing\\\/images\\\/f_auto,q_auto\\\/v1649718331\\\/Web_Assets\\\/blog\\\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\\\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\\\/\\\/res.cloudinary.com\\\/cloudinary-marketing\\\/images\\\/f_auto,q_auto\\\/v1649718331\\\/Web_Assets\\\/blog\\\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\\\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/cloudinary.com\\\/blog\\\/#\\\/schema\\\/person\\\/43592e43c12520a1e867d456b1e8cf7e\",\"name\":\"damjanantevski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3b40c995531fe4d510212a06c9d4fc666d2cb8efbfebc98a94191701accf4817?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3b40c995531fe4d510212a06c9d4fc666d2cb8efbfebc98a94191701accf4817?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3b40c995531fe4d510212a06c9d4fc666d2cb8efbfebc98a94191701accf4817?s=96&d=mm&r=g\",\"caption\":\"damjanantevski\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can circles be created using pure CSS styling?","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling","og_locale":"en_US","og_type":"article","og_title":"How can circles be created using pure CSS styling?","og_description":"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","og_url":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling","og_site_name":"Cloudinary Blog","article_published_time":"2026-01-24T09:59:27+00:00","article_modified_time":"2026-01-24T09:59:28+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA","type":"image\/jpeg"}],"author":"damjanantevski","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling"},"author":{"name":"damjanantevski","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/43592e43c12520a1e867d456b1e8cf7e"},"headline":"How can circles be created using pure CSS styling?","datePublished":"2026-01-24T09:59:27+00:00","dateModified":"2026-01-24T09:59:28+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling"},"wordCount":554,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA","keywords":["Questions"],"inLanguage":"en-US","copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling","url":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling","name":"How can circles be created using pure CSS styling?","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA","datePublished":"2026-01-24T09:59:27+00:00","dateModified":"2026-01-24T09:59:28+00:00","description":"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","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA","width":1200,"height":630,"caption":"CSS featured image"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog"},{"@type":"ListItem","position":2,"name":"How can circles be created using pure CSS styling?"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/43592e43c12520a1e867d456b1e8cf7e","name":"damjanantevski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3b40c995531fe4d510212a06c9d4fc666d2cb8efbfebc98a94191701accf4817?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b40c995531fe4d510212a06c9d4fc666d2cb8efbfebc98a94191701accf4817?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b40c995531fe4d510212a06c9d4fc666d2cb8efbfebc98a94191701accf4817?s=96&d=mm&r=g","caption":"damjanantevski"}}]}},"parsely":{"version":"1.1.0","canonical_url":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling","meta":{"@context":"https:\/\/schema.org","@type":"NewsArticle","headline":"How can circles be created using pure CSS styling?","url":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA&w=150&h=150&crop=1","image":{"@type":"ImageObject","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA"},"articleSection":"Uncategorized","author":[{"@type":"Person","name":"damjanantevski"}],"creator":["damjanantevski"],"publisher":{"@type":"Organization","name":"Cloudinary Blog","logo":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA"},"keywords":["questions"],"dateCreated":"2026-01-24T09:59:27Z","datePublished":"2026-01-24T09:59:27Z","dateModified":"2026-01-24T09:59:28Z"},"rendered":"<meta name=\"parsely-title\" content=\"How can circles be created using pure CSS styling?\" \/>\n<meta name=\"parsely-link\" content=\"https:\/\/cloudinary.com\/blog\/questions\/how-can-circles-be-created-using-pure-css-styling\" \/>\n<meta name=\"parsely-type\" content=\"post\" \/>\n<meta name=\"parsely-image-url\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA&w=150&amp;h=150&amp;crop=1\" \/>\n<meta name=\"parsely-pub-date\" content=\"2026-01-24T09:59:27Z\" \/>\n<meta name=\"parsely-section\" content=\"Uncategorized\" \/>\n<meta name=\"parsely-tags\" content=\"questions\" \/>\n<meta name=\"parsely-author\" content=\"damjanantevski\" \/>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/cloudinary.com\/p.js"},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769222068\/css_featured_image\/css_featured_image.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/88"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=39739"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39739\/revisions"}],"predecessor-version":[{"id":39740,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39739\/revisions\/39740"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/39726"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=39739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=39739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=39739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}