Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw circle in HTML page?
To draw a circle in HTML page, use SVG, HTML5 Canvas, or CSS. The most common approach is using CSS with the border-radius property set to 50% on a square element. SVG provides more control for complex graphics, while Canvas allows dynamic drawing with JavaScript.
Using CSS Border-Radius
The simplest method to create a circle is using CSS. Set equal width and height on an element, then apply border-radius: 50% to make it perfectly circular.
Example − Basic CSS Circle
<!DOCTYPE html>
<html>
<head>
<title>CSS Circle</title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #3498db;
margin: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>CSS Circle</h2>
<div class="circle"></div>
</body>
</html>
The output displays a perfect blue circle −
CSS Circle ? (blue circle, 100px diameter)
Example − Multiple Styled Circles
Following example shows circles with different colors, sizes, and borders −
<!DOCTYPE html>
<html>
<head>
<title>Styled Circles</title>
<style>
.circle {
border-radius: 50%;
display: inline-block;
margin: 10px;
}
.circle1 {
width: 80px;
height: 80px;
background-color: #e74c3c;
}
.circle2 {
width: 120px;
height: 120px;
background-color: #2ecc71;
border: 5px solid #27ae60;
}
.circle3 {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #f39c12, #e67e22);
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Different Circle Styles</h2>
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
</body>
</html>
This creates three circles with different colors, sizes, and effects −
Different Circle Styles ? ? ? (red circle, green circle with border, orange gradient circle)
Using SVG
SVG (Scalable Vector Graphics) provides precise control over circle properties like stroke, fill, and positioning. The <circle> element requires cx and cy for center coordinates, and r for radius.
Example − SVG Circle
<!DOCTYPE html>
<html>
<head>
<title>SVG Circle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>SVG Circles</h2>
<svg width="400" height="200">
<circle cx="80" cy="80" r="50" fill="#9b59b6" />
<circle cx="200" cy="80" r="40" fill="none" stroke="#34495e" stroke-width="8" />
<circle cx="320" cy="80" r="45" fill="#1abc9c" stroke="#16a085" stroke-width="3" />
</svg>
</body>
</html>
The SVG displays three circles with different fill and stroke properties −
SVG Circles ? ? ? (purple filled, dark outline only, teal with border)
Using HTML5 Canvas
Canvas allows dynamic circle creation using JavaScript. Use the arc() method with parameters for center coordinates, radius, start angle (0), and end angle (2? for full circle).
Example − Canvas Circle
<!DOCTYPE html>
<html>
<head>
<title>Canvas Circle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Canvas Circles</h2>
<canvas id="myCanvas" width="400" height="200" style="border: 1px solid #ddd;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Filled circle
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#e67e22';
ctx.fill();
// Outlined circle
ctx.beginPath();
ctx.arc(200, 100, 40, 0, 2 * Math.PI);
ctx.strokeStyle = '#8e44ad';
ctx.lineWidth = 6;
ctx.stroke();
// Filled circle with outline
ctx.beginPath();
ctx.arc(320, 100, 45, 0, 2 * Math.PI);
ctx.fillStyle = '#2c3e50';
ctx.fill();
ctx.strokeStyle = '#ecf0f1';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
The canvas displays three programmatically drawn circles −
Canvas Circles [Canvas with three circles: orange filled, purple outline, dark with light border]
Comparison of Methods
| Method | Best For | Advantages | Disadvantages |
|---|---|---|---|
| CSS border-radius | Simple static circles | Easy to implement, good performance, CSS animations | Limited to basic shapes |
| SVG circle | Scalable graphics, complex designs | Vector graphics, infinite scalability, precise control | DOM overhead for many elements |
| Canvas arc | Dynamic drawing, games, animations | Programmatic control, pixel manipulation, real-time updates | Requires JavaScript, not SEO-friendly |
Circle with Text Inside
Following example shows how to center text inside a CSS circle −
<!DOCTYPE html>
<html>
<head>
<title>Circle with Text</title>
<style>
.text-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #34495e;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
margin: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Circle with Centered Text</h2>
<div class="text-circle">HTML5</div>
</body>
</html>
Using flexbox properties centers the text perfectly within the circle −
Circle with Centered Text ? HTML5 (white text centered in dark circle)
Conclusion
CSS with border-radius: 50% is the simplest method for basic circles. Use SVG for scalable, complex graphics, and Canvas for dynamic, interactive circles that need programmatic control. Choose the method based on your specific requirements for styling, scalability, and interactivity.
10K+ Views
