Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Empty Circles with CSS
To create empty circle on a web page, use the border-radius property. To align multiple circles on a web page, set the display property to inline-block. Let us see how to create empty circles with HTML and CSS.
Create a container for circles
Set a div container for the multiple circles we wish to create on a web page −
<div> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div>
Create the empty circles
Use the border-radius property with the value 50% to create a circle. To align the circles properly, use the display property with the value inline-block −
.circle {
height: 25px;
width: 25px;
background-color: rgb(52, 15, 138);
border-radius: 50%;
display: inline-block;
}
Color the circle
Using the :nth-of-type selector, we have set the red background color to every alternative circle −
div :nth-of-type(2n) {
background-color: red;
}
Example
To create empty circles with CSS, the code is as follows -
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.circle {
height: 25px;
width: 25px;
background-color: rgb(52, 15, 138);
border-radius: 50%;
display: inline-block;
}
div :nth-of-type(2n) {
background-color: red;
}
</style>
</head>
<body>
<h1>Round dots example</h1>
<div>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</body>
</html>
Updated on: 2023-12-14T17:06:00+05:30
901 Views
Advertisements