How to create empty circle with CSS ?
Last Updated :
20 Mar, 2024
In this article, we will see how to create an empty circle. To create the empty circle, we will use HTML and CSS. HTML is used to create the basic structure and CSS is used here to make the circle.
Syntax:
element {
...
border: 1px solid color;
border-radius: 50%;
}Approach: First we will create a div element and then add CSS styles to that element. We will set the width, height, border, and border-radius of the element. To create the circle, we will use the border-radius: 50%.
Â
Example 1: In this example, we will create an empty circle.
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>
body {
text-align: center;
}
h1 {
color: green;
}
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
margin: auto;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to create empty circle with CSS?
</h3>
<div class="circle"></div>
</body>
</html>
Output:
Â
Example 2: In this example, we will create an empty circle with a green background color.
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>
body {
text-align: center;
}
h1 {
color: green;
}
.circle {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
margin: auto;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to create empty circle with CSS?
</h3>
<div class="circle"></div>
</body>
</html>
Output:
Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...