How to create empty circle with CSS ?
Last Updated :
23 Jul, 2025
Creating an empty circle with CSS means styling an HTML element (like a div) to appear as a circular shape. This is done by setting equal width and height, adding a border, and applying border-radius: 50% to form the circle.
Creating an Empty Circle By Using border-radius Property
the border-radius property involves setting a div element's width and height to equal values, applying a border for the outline, and using border-radius: 50% to transform the square into a circle.
Syntax
element {
border: 1px solid color;
border-radius: 50%;
}Example 1: In this example, we create an empty circle using CSS. The .circle class styles a div with a specified width, height, border, and border-radius of 50% to form the circular shape.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
How to create empty circle with CSS?
</title>
<style>
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
}
</style>
</head>
<body>
<h3>
Creating Empty Circle by Using CSS
</h3>
<div class="circle"></div>
</body>
</html>
Output:
createing empty circle with CSSExample 2: In this example, we create a circle using CSS. The .circle class styles the div element with a width, height, and border-radius of 50% to form the circular shape.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
How to create empty circle with CSS?
</title>
<style>
.circle {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
}
</style>
</head>
<body>
<h3>
Create Empty Circle By Using CSS
</h3>
<div class="circle"></div>
</body>
</html>
Output:
Empty circle by Using Css Example Output