Circular marker for List Items
To set circular marker for the list items in an unordered or ordered list using CSS, set list-style-type
property for the list with the circle
value as shown in the following.
ul { list-style-type: circle; } /* or */ ol { list-style-type: circle; }
Examples
1 Circle marker for ordered list items
In the following example, we take an ordered list and specify circle
as marker for the list items.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ol { list-style-type: circle; } </style> </head> <body> <ol> <li>Apple</li> <li>Banana</li> <li>Cherry</li> <li>Mango</li> </ol> </body> </html>
2 Circle marker for unordered list items
In the following example, we take an unordered list and specify circle
as marker for the list items.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul { list-style-type: circle; } </style> </head> <body> <ul> <li>Apple</li> <li>Banana</li> <li>Cherry</li> <li>Mango</li> </ul> </body> </html>
Conclusion
In this CSS Tutorial, we learned how to use CSS list-style-type
property to set circular marker for list items, with examples.