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 an unordered list with circle bullets in HTML?
An unordered list displays a collection of items marked with bullets such as circles, discs, or squares. The <ul> tag creates the list container, while <li> tags define individual list items. By default, unordered lists use solid disc bullets, but you can customize the bullet style using CSS.
To create circle bullets specifically, you use the CSS list-style-type property with the value circle. This property can be applied either inline with the style attribute or through external CSS stylesheets.
Syntax
Following is the syntax to create an unordered list with circle bullets −
<ul style="list-style-type: circle"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Alternatively, you can use CSS classes −
.circle-list {
list-style-type: circle;
}
<ul class="circle-list"> <li>List item 1</li> <li>List item 2</li> </ul>
Using Inline CSS for Circle Bullets
Example
Following example demonstrates creating an unordered list with circle bullets using inline CSS −
<!DOCTYPE html>
<html>
<head>
<title>Unordered List with Circle Bullets</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages</h2>
<ul style="list-style-type: circle">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>PHP</li>
</ul>
</body>
</html>
The output displays a list with hollow circle bullets −
Programming Languages ? JavaScript ? Python ? Java ? C++ ? PHP
Using External CSS for Circle Bullets
Example
Following example shows how to create circle bullets using external CSS styling −
<!DOCTYPE html>
<html>
<head>
<title>Circle Bullets with CSS</title>
<style>
.circle-bullets {
list-style-type: circle;
margin-left: 20px;
}
.heading {
color: #2c3e50;
font-family: Arial, sans-serif;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 class="heading">Web Development Technologies</h2>
<ul class="circle-bullets">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>jQuery</li>
</ul>
</body>
</html>
The output shows a styled list with circle bullets and custom heading color −
Web Development Technologies (dark blue heading) ? HTML5 ? CSS3 ? JavaScript ? Bootstrap ? jQuery
Comparison of List Bullet Types
The following table compares different bullet types available for unordered lists −
| CSS Value | Bullet Style | Description |
|---|---|---|
| disc | ? | Solid filled circle (default) |
| circle | ? | Hollow circle outline |
| square | ? | Solid filled square |
| none | - | No bullet marker |
Nested Lists with Circle Bullets
Example
Following example demonstrates creating nested unordered lists with circle bullets −
<!DOCTYPE html>
<html>
<head>
<title>Nested Lists with Circle Bullets</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Structure</h2>
<ul style="list-style-type: circle">
<li>Frontend Development
<ul style="list-style-type: circle">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Development
<ul style="list-style-type: circle">
<li>Node.js</li>
<li>Python</li>
<li>PHP</li>
</ul>
</li>
<li>Database
<ul style="list-style-type: circle">
<li>MySQL</li>
<li>MongoDB</li>
</ul>
</li>
</ul>
</body>
</html>
The output displays nested lists with consistent circle bullets −
Course Structure
? Frontend Development
? HTML
? CSS
? JavaScript
? Backend Development
? Node.js
? Python
? PHP
? Database
? MySQL
? MongoDB
Key Points
-
The
list-style-type: circleproperty creates hollow circle bullets instead of the default solid disc bullets. -
Circle bullets can be applied using inline CSS with the
styleattribute or through external CSS classes. -
The
<ul>tag must contain<li>elements to create valid list items. -
Circle bullets work consistently across nested lists and maintain the same styling at all levels.
Conclusion
Creating unordered lists with circle bullets in HTML is accomplished using the CSS list-style-type: circle property. This replaces the default solid disc bullets with hollow circle outlines, providing a cleaner visual appearance. The technique works with both inline CSS and external stylesheets, making it flexible for various design needs.
11K+ Views
