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 create empty circles with CSS?
To create empty circles on a web page, use the border-radius property with a value of 50%. Empty circles are hollow shapes with only a border visible and no filled background. This technique is useful for creating decorative elements, loading indicators, or UI components.
Syntax
selector {
width: value;
height: value;
border-radius: 50%;
border: width style color;
background-color: transparent;
}
Method 1: Using Border Property
The most common approach is to create a square element and apply border-radius: 50% with a border but no background −
<!DOCTYPE html>
<html>
<head>
<style>
.empty-circle {
width: 60px;
height: 60px;
border: 3px solid #007bff;
border-radius: 50%;
background-color: transparent;
display: inline-block;
margin: 10px;
}
</style>
</head>
<body>
<div class="empty-circle"></div>
<div class="empty-circle"></div>
<div class="empty-circle"></div>
</body>
</html>
Three blue empty circles with transparent centers appear horizontally aligned on the page.
Method 2: Multiple Circles with Different Colors
You can create multiple empty circles with different border colors using CSS selectors −
<!DOCTYPE html>
<html>
<head>
<style>
.circle-container {
text-align: center;
margin: 20px;
}
.circle {
width: 40px;
height: 40px;
border: 2px solid #333;
border-radius: 50%;
background-color: transparent;
display: inline-block;
margin: 5px;
}
.circle:nth-child(1) { border-color: #e74c3c; }
.circle:nth-child(2) { border-color: #3498db; }
.circle:nth-child(3) { border-color: #2ecc71; }
.circle:nth-child(4) { border-color: #f39c12; }
</style>
</head>
<body>
<div class="circle-container">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</body>
</html>
Four empty circles appear in a row with different colored borders: red, blue, green, and orange.
Method 3: Responsive Empty Circles
Create responsive empty circles using relative units and flexible sizing −
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-circle {
width: 5rem;
height: 5rem;
border: 0.2rem solid #6c5ce7;
border-radius: 50%;
background-color: transparent;
display: inline-block;
margin: 1rem;
transition: all 0.3s ease;
}
.responsive-circle:hover {
border-color: #a29bfe;
transform: scale(1.1);
}
</style>
</head>
<body>
<div style="text-align: center; padding: 2rem;">
<div class="responsive-circle"></div>
<div class="responsive-circle"></div>
</div>
</body>
</html>
Two purple empty circles that grow slightly and change color when hovered over.
Key Properties
| Property | Value | Purpose |
|---|---|---|
border-radius |
50% |
Creates circular shape |
border |
width style color |
Defines the circle outline |
background-color |
transparent |
Makes the center hollow |
width & height
|
Equal values | Ensures perfect circle |
Conclusion
Empty circles are created by combining border-radius: 50% with a border and transparent background. Ensure equal width and height values for perfect circles, and use display: inline-block for horizontal alignment.
1K+ Views
