In web design, lists are used everywhere—from navigation menus to content sections and forms. The list-style-type property in CSS gives you control over how list markers (bullets or numbers) appear in both unordered and ordered lists. By understanding the available values, you can design lists that match your site’s look and feel.
In this post, we’ll explore the most common values for list-style-type and when to use them.
📋 What Does list-style-type Do?
The list-style-type property defines the marker style of list items in unordered (<ul>) and ordered (<ol>) lists.
Syntax:
selector {
list-style-type: value;
}
🔹 Common Values for Unordered Lists (<ul>)
These values define the shape of the bullet:
| Value | Description | Example Output |
|---|---|---|
disc | Solid circle (default) | • Item |
circle | Hollow circle | ○ Item |
square | Solid square | ■ Item |
none | Removes the marker | (no bullet) |
Example:
ul {
list-style-type: square;
}
🔸 Common Values for Ordered Lists (<ol>)
These values define the type of numbering:
| Value | Description | Example Output |
|---|---|---|
decimal | Standard numbers | 1, 2, 3 |
decimal-leading-zero | Padded numbers | 01, 02, 03 |
lower-alpha | Lowercase letters | a, b, c |
upper-alpha | Uppercase letters | A, B, C |
lower-roman | Lowercase Roman numerals | i, ii, iii |
upper-roman | Uppercase Roman numerals | I, II, III |
Example:
ol {
list-style-type: upper-roman;
}
🚫 Hiding List Markers
To remove markers altogether—useful for navigation menus or custom-styled lists:
ul {
list-style-type: none;
padding-left: 0;
}
🧩 Bonus: Less Common or Locale-Specific Values
Depending on browser support, you might encounter or use other values like:
armeniangeorgianhebrewcjk-ideographickatakanahiragana
These are useful for internationalization but are less commonly used in standard web projects.
📝 Final Thoughts
The list-style-type property is a simple yet powerful tool in your CSS toolkit. Whether you’re creating a clean navigation list, formatting legal documents, or building multi-level outlines, choosing the right list style can significantly improve the visual clarity of your content.
