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
Selected Reading
Usage of CSS list-style-type property
The list-style-type CSS property allows you to control the shape or appearance of list item markers. This property works with both ordered (<ol>) and unordered (<ul>) lists.
Syntax
list-style-type: value;
Common Values for Unordered Lists
Here are the most commonly used values for unordered list markers:
<!DOCTYPE html>
<html>
<head>
<style>
.circle-list { list-style-type: circle; }
.square-list { list-style-type: square; }
.disc-list { list-style-type: disc; }
.none-list { list-style-type: none; }
</style>
</head>
<body>
<ul class="circle-list">
<li>India</li>
<li>Australia</li>
</ul>
<ul class="square-list">
<li>Germany</li>
<li>France</li>
</ul>
<ul class="disc-list">
<li>Japan</li>
<li>China</li>
</ul>
<ul class="none-list">
<li>No marker</li>
<li>Clean list</li>
</ul>
</body>
</html>
Ordered List Values
For ordered lists, you can use numeric, alphabetic, or roman numeral markers:
<!DOCTYPE html>
<html>
<head>
<style>
.decimal { list-style-type: decimal; }
.upper-alpha { list-style-type: upper-alpha; }
.lower-roman { list-style-type: lower-roman; }
.upper-roman { list-style-type: upper-roman; }
</style>
</head>
<body>
<ol class="decimal">
<li>First item</li>
<li>Second item</li>
</ol>
<ol class="upper-alpha">
<li>Alpha list</li>
<li>Beta list</li>
</ol>
<ol class="lower-roman">
<li>Roman numerals</li>
<li>Lower case</li>
</ol>
</body>
</html>
Comparison Table
| Value | List Type | Marker Style |
|---|---|---|
| disc | Unordered | Filled circle (default) |
| circle | Unordered | Empty circle |
| square | Unordered | Filled square |
| decimal | Ordered | Numbers (1, 2, 3...) |
| upper-alpha | Ordered | Uppercase letters (A, B, C...) |
| lower-roman | Ordered | Lowercase Roman (i, ii, iii...) |
| none | Both | No marker |
Conclusion
The list-style-type property provides flexible control over list markers. Use circle, square, or disc for unordered lists, and decimal, upper-alpha, or roman numerals for ordered lists to match your design needs.
Updated on: 2026-03-15T23:18:59+05:30
72 Views
Advertisements