DEV Community

Cover image for How to Draw Circle using CSS and HTML: The Complete Developer's Guide
Suresh Ramani
Suresh Ramani

Posted on • Originally published at techvblogs.com

How to Draw Circle using CSS and HTML: The Complete Developer's Guide

#css #html #design

Drawing perfect circles with CSS and HTML is a fundamental skill every web developer should master. Whether you're creating profile avatars, buttons, loaders, or interactive elements like our Draw a Perfect Circle game, understanding how to create circles programmatically is essential for modern web development.

What You'll Learn About Drawing Circles with HTML and CSS

In this comprehensive guide, you'll discover multiple techniques to create circles using pure CSS, understand when to use different approaches, and learn best practices for responsive, accessible circle designs. From basic circular shapes to advanced animated effects, we'll cover everything you need to know.

Why Circles Matter in Web Design

Circles are everywhere in modern web design. They create visual hierarchy, draw attention to important elements, and provide a softer, more approachable aesthetic compared to sharp rectangular shapes. Popular uses include:

  • Profile pictures and avatars
  • Call-to-action buttons
  • Progress indicators and loaders
  • Icon backgrounds
  • Decorative elements
  • Interactive games and tools

Understanding the Basics

What Is a Circle in the Context of HTML and CSS?

In web development, a "circle" is typically a square HTML element transformed into a circular shape using CSS properties. The key is maintaining equal width and height while applying a border-radius of 50%.

The Difference Between a CSS Circle and an SVG Circle

  • CSS Circles: Created by styling HTML elements, perfect for simple shapes and UI components
  • SVG Circles: Vector-based graphics ideal for complex designs, animations, and scalable graphics

Setting Up Your HTML Structure

Creating the Basic HTML Container

Start with a simple, semantic HTML structure:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Circle Examples</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="circle-container"> <div class="circle"></div> </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Best Practices for Semantic Markup

Always use meaningful class names and consider accessibility:

<!-- Good: Semantic and accessible --> <div class="profile-avatar circle" role="img" aria-label="User profile picture"> <img src="avatar.jpg" alt="John Doe"> </div> <!-- Better: Using semantic HTML5 elements --> <figure class="user-avatar"> <img src="avatar.jpg" alt="John Doe" class="circle-image"> </figure>
Enter fullscreen mode Exit fullscreen mode

Drawing a Perfect Circle with Pure CSS

Using border-radius to Create a Circular Shape

The fundamental technique for creating CSS circles:

.circle { width: 100px; height: 100px; border-radius: 50%; background-color: #3498db; }
Enter fullscreen mode Exit fullscreen mode

Controlling Size with Width and Height

Important: Always maintain equal width and height for perfect circles:

/* Perfect circle - equal dimensions */ .perfect-circle { width: 150px; height: 150px; border-radius: 50%; } /* Oval shape - different dimensions */ .oval { width: 200px; height: 100px; border-radius: 50%; }
Enter fullscreen mode Exit fullscreen mode

Applying Background Colors and Borders

Enhance your circles with colors and borders:

.styled-circle { width: 120px; height: 120px; border-radius: 50%; background-color: #e74c3c; border: 4px solid #c0392b; box-sizing: border-box; /* Important for border calculations */ }
Enter fullscreen mode Exit fullscreen mode

Making Responsive Circles

How to Keep Circles Perfect Across Devices

Use relative units and maintain aspect ratios:

.responsive-circle { width: 20vw; /* 20% of viewport width */ height: 20vw; /* Same as width for perfect circle */ max-width: 200px; max-height: 200px; border-radius: 50%; background-color: #9b59b6; }
Enter fullscreen mode Exit fullscreen mode

Using Viewport Units and Percentages

Create circles that scale with the container:

.container-relative-circle { width: 50%; padding-bottom: 50%; /* Creates square aspect ratio */ border-radius: 50%; background-color: #f39c12; position: relative; } .container-relative-circle::before { content: ''; display: block; padding-bottom: 100%; /* 1:1 Aspect Ratio */ }
Enter fullscreen mode Exit fullscreen mode

Creating Outlined Circles

Using Borders to Create Hollow Circles

Perfect for minimalist designs:

.outlined-circle { width: 100px; height: 100px; border: 3px solid #2c3e50; border-radius: 50%; background-color: transparent; } /* Double border effect */ .double-border-circle { width: 100px; height: 100px; border: 2px solid #3498db; border-radius: 50%; background-color: white; box-shadow: 0 0 0 4px #ecf0f1; }
Enter fullscreen mode Exit fullscreen mode

Styling the Border for Visual Impact

Create dashed, dotted, or gradient borders:

.dashed-circle { width: 120px; height: 120px; border: 4px dashed #e67e22; border-radius: 50%; background-color: #fdf2e9; } .gradient-border-circle { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); padding: 4px; } .gradient-border-circle::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background-color: white; }
Enter fullscreen mode Exit fullscreen mode

Using Gradients and Shadows

Adding Depth with box-shadow

Create realistic depth and hover effects:

.shadow-circle { width: 100px; height: 100px; border-radius: 50%; background-color: #3498db; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; } .shadow-circle:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); }
Enter fullscreen mode Exit fullscreen mode

Creating Stylish Effects with CSS Gradients

Modern gradient circles for contemporary designs:

.gradient-circle { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .radial-gradient-circle { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at center, #ff7e5f 0%, #feb47b 100%); } .animated-gradient-circle { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); background-size: 400% 400%; animation: gradientShift 4s ease infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
Enter fullscreen mode Exit fullscreen mode

Centering Text Inside the Circle

Using Flexbox for Vertical and Horizontal Alignment

Perfect text centering every time:

.circle-with-text { width: 120px; height: 120px; border-radius: 50%; background-color: #2c3e50; color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; text-align: center; }
Enter fullscreen mode Exit fullscreen mode

Adjusting Font Size and Line Height for Visual Balance

Responsive text that scales with the circle:

.responsive-text-circle { width: 15vw; height: 15vw; max-width: 200px; max-height: 200px; border-radius: 50%; background-color: #e74c3c; color: white; display: flex; align-items: center; justify-content: center; font-size: calc(1rem + 1vw); line-height: 1; }
Enter fullscreen mode Exit fullscreen mode

Interactive and Animated Circles

Hover Effects That Make Circles Pop

Engaging interactions for better user experience:

.interactive-circle { width: 100px; height: 100px; border-radius: 50%; background-color: #3498db; cursor: pointer; transition: all 0.3s ease; transform: scale(1); } .interactive-circle:hover { background-color: #2980b9; transform: scale(1.1); box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3); } .interactive-circle:active { transform: scale(0.95); }
Enter fullscreen mode Exit fullscreen mode

Animating Circles with CSS Transitions and Keyframes

Smooth animations for dynamic interfaces:

.spinning-circle { width: 80px; height: 80px; border: 4px solid #ecf0f1; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pulsing-circle { width: 60px; height: 60px; border-radius: 50%; background-color: #e74c3c; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } }
Enter fullscreen mode Exit fullscreen mode

Using Circles in Real-World UI Components

Profile Avatars and Buttons

Common implementation patterns:

/* Profile Avatar */ .profile-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); object-fit: cover; cursor: pointer; } /* Circular Button */ .circular-button { width: 56px; height: 56px; border-radius: 50%; border: none; background-color: #2196F3; color: white; font-size: 24px; cursor: pointer; box-shadow: 0 2px 10px rgba(33, 150, 243, 0.3); transition: all 0.2s ease; } .circular-button:hover { background-color: #1976D2; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4); }
Enter fullscreen mode Exit fullscreen mode

Progress Circles and Loaders

Advanced circular progress indicators:

.progress-circle { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#4CAF50 var(--progress, 0%), #e0e0e0 0%); display: flex; align-items: center; justify-content: center; position: relative; } .progress-circle::before { content: ''; width: 80%; height: 80%; border-radius: 50%; background-color: white; position: absolute; } .progress-circle .progress-text { position: relative; z-index: 1; font-weight: bold; font-size: 18px; }
Enter fullscreen mode Exit fullscreen mode

Just like mastering the art of drawing circles in our interactive circle drawing game, creating perfect CSS circles requires practice and attention to detail.

Alternative Methods to Create Circles

Using SVG for More Complex Circle Designs

When CSS isn't enough:

<svg width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="#3498db" stroke="#2c3e50" stroke-width="2" /> </svg>
Enter fullscreen mode Exit fullscreen mode 
.svg-circle { width: 100px; height: 100px; } .svg-circle circle { transition: all 0.3s ease; } .svg-circle:hover circle { fill: #2980b9; r: 45; }
Enter fullscreen mode Exit fullscreen mode

Canvas vs. CSS: When to Use Which

Use CSS circles when:

  • Creating simple UI elements
  • Need hover effects and CSS animations
  • Working with static designs
  • Prioritizing performance

Use Canvas/SVG when:

  • Creating complex interactive graphics
  • Need precise mathematical control
  • Building games or data visualizations
  • Requiring dynamic, programmatic generation

Common Mistakes to Avoid

Not Maintaining Aspect Ratio

Wrong:

.bad-circle { width: 100px; height: 150px; /* Different from width */ border-radius: 50%; }
Enter fullscreen mode Exit fullscreen mode

Correct:

.good-circle { width: 100px; height: 100px; /* Same as width */ border-radius: 50%; }
Enter fullscreen mode Exit fullscreen mode

Overcomplicating the CSS

Keep it simple and maintainable:

Overcomplicated:

.complex-circle { width: 100px; height: 100px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; }
Enter fullscreen mode Exit fullscreen mode

Simple and Clean:

.simple-circle { width: 100px; height: 100px; border-radius: 50%; }
Enter fullscreen mode Exit fullscreen mode

Forgetting Accessibility and Readability

Always consider users with disabilities:

.accessible-circle { width: 100px; height: 100px; border-radius: 50%; background-color: #3498db; /* Ensure sufficient contrast */ color: white; /* Maintain focus indicators */ outline: 2px solid transparent; outline-offset: 2px; } .accessible-circle:focus { outline-color: #2c3e50; }
Enter fullscreen mode Exit fullscreen mode

Best Practices for Clean and Maintainable Circle Code

Organizing Your CSS Classes

Structure your CSS for reusability:

/* Base circle styles */ .circle { border-radius: 50%; display: inline-block; } /* Size variations */ .circle--small { width: 32px; height: 32px; } .circle--medium { width: 64px; height: 64px; } .circle--large { width: 128px; height: 128px; } /* Color variations */ .circle--primary { background-color: #3498db; } .circle--secondary { background-color: #95a5a6; } .circle--success { background-color: #2ecc71; } /* Interactive states */ .circle--clickable { cursor: pointer; transition: transform 0.2s ease; } .circle--clickable:hover { transform: scale(1.05); }
Enter fullscreen mode Exit fullscreen mode

Using Variables and Utility Classes

Modern CSS with custom properties:

:root { --circle-size-sm: 32px; --circle-size-md: 64px; --circle-size-lg: 128px; --primary-color: #3498db; --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.1); } .circle-utility { border-radius: 50%; width: var(--circle-size, var(--circle-size-md)); height: var(--circle-size, var(--circle-size-md)); background-color: var(--bg-color, var(--primary-color)); box-shadow: var(--shadow, var(--shadow-subtle)); }
Enter fullscreen mode Exit fullscreen mode

Usage:

<div class="circle-utility" style="--circle-size: var(--circle-size-lg); --bg-color: #e74c3c;"></div>
Enter fullscreen mode Exit fullscreen mode

Advanced Circle Techniques

Creating Perfect Circles with CSS Grid

Using CSS Grid for complex circle layouts:

.circle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; } .grid-circle { aspect-ratio: 1; border-radius: 50%; background: linear-gradient(45deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
Enter fullscreen mode Exit fullscreen mode

Responsive Circle Techniques

Modern responsive approaches:

.responsive-circle-container { width: 100%; max-width: 300px; } .responsive-circle-container .circle { width: 100%; aspect-ratio: 1; border-radius: 50%; background-color: #3498db; } /* Using clamp() for responsive sizing */ .clamp-circle { width: clamp(50px, 10vw, 200px); height: clamp(50px, 10vw, 200px); border-radius: 50%; background-color: #e74c3c; }
Enter fullscreen mode Exit fullscreen mode

Performance Considerations

Optimizing Circle Animations

Efficient animations using transform and opacity:

.optimized-circle { width: 100px; height: 100px; border-radius: 50%; background-color: #3498db; /* Use transform for better performance */ transform: scale(1); transition: transform 0.3s ease; /* Use will-change for complex animations */ will-change: transform; } .optimized-circle:hover { transform: scale(1.1); } /* Remove will-change after animation */ .optimized-circle:not(:hover) { will-change: auto; }
Enter fullscreen mode Exit fullscreen mode

CSS-only vs JavaScript Solutions

Choose the right approach:

CSS-only (Recommended for simple cases):

.css-progress-circle { background: conic-gradient(#4CAF50 calc(var(--progress) * 1%), #e0e0e0 0%); }
Enter fullscreen mode Exit fullscreen mode

JavaScript-enhanced (For complex interactions):

function updateProgressCircle(element, progress) { element.style.setProperty('--progress', progress); }
Enter fullscreen mode Exit fullscreen mode

Conclusion

Creating circles with CSS and HTML is a fundamental web development skill that opens up endless design possibilities. From simple profile avatars to complex interactive elements like our circle drawing game, mastering these techniques will enhance your ability to create engaging, modern web interfaces.

Key Takeaways:

  1. Always maintain equal width and height for perfect circles
  2. Use border-radius: 50% as your primary circle-creation method
  3. Consider accessibility in your circle designs
  4. Optimize for performance with proper CSS techniques
  5. Choose the right method (CSS vs SVG vs Canvas) for your use case

Next Steps: Experimenting with Advanced Shapes and Animations

Now that you've mastered CSS circles, consider exploring:

  • Advanced CSS shapes with clip-path
  • Complex animations with CSS keyframes
  • Interactive elements combining circles with JavaScript
  • 3D effects using CSS transforms
  • SVG animations for more complex designs

Practice these techniques by experimenting with different combinations and creating your own unique circular designs. Remember, just like drawing a perfect circle by hand requires practice, mastering CSS circles takes time and experimentation.

Ready to test your circle-drawing skills? Try our interactive Draw a Perfect Circle game to see how your freehand circles compare to the mathematical precision of CSS!

Top comments (1)

Collapse
 
peterwei profile image
Peter •

Fantastic comprehensive guide! I love how you covered everything from basic border-radius circles to advanced responsive techniques with aspect-ratio and clamp(). The performance optimization tips with will-change are especially helpful. Speaking of circles, after reading about all these CSS techniques for creating perfect circles, I'm curious how my freehand drawing skills compare - found this fun game at perfect-circle.fun that tests how perfectly round you can draw circles without code. It's interesting to see the contrast between mathematical CSS precision and human drawing ability!