- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to 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>
Advertisements