LAST UPDATED: AUGUST 5, 2021
How to create empty circles with CSS?
There is no HTML element that can be used to create an empty circle. But still, we can easily create an empty circle using Some CSS properties. Here, we will learn about it.
Creating an empty circle with CSS
To create an empty circle first of all add an empty <div> element. Use CSS border-radius: 50% to make the div element circular. Additionally set the height, width and border of <div> element.
Example: Creating an empty circle with CSS
In this example, we have added an empty circle with a border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.circle {
border-radius: 50%;
height: 100px;
width: 100px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2> Empty circle </h2>
<div class="circle">
</div>
</body>
</html>
Output
Here is the output of the above example.
Example: Adding Background to an empty circle
Here, we have added a background color to the empty circle.
Conclusion
In this tutorial, we have learned to create an empty circle with CSS. For that use border-radius:50% property. We explained code with examples.
