CSS
What Are Some Common Values for list-style-type in CSS?
When designing websites, lists are an essential part of presenting information in a clean and organized way. Whether you’re using unordered lists (<ul>) or ordered lists (<ol>), CSS gives you the ability to control how the list markers (like bullets or numbers) appear. This is where the list-style-type property comes in.
In this blog, we’ll explore some common values for list-style-type in CSS and show how you can use them to style your lists like a pro.
🔧 What is list-style-type?
The list-style-type property defines the marker style for list items. These markers are the symbols or numbers that appear before each item in a list.
Syntax:
selector {
list-style-type: value;
}
You can apply it to any HTML list: <ul>, <ol>, or <menu>.
📋 Common Values for Unordered Lists (<ul>)
Unordered lists display simple symbols like bullets. Here are the most commonly used values:
| Value | Description | Visual Example |
|---|---|---|
disc | Default solid bullet (●) | ● Item |
circle | Hollow bullet (○) | ○ Item |
square | Solid square (■) | ■ Item |
none | No marker | Item |
Example:
ul.circle-style {
list-style-type: circle;
}
🔢 Common Values for Ordered Lists (<ol>)
Ordered lists use numbers, letters, or Roman numerals. Here are some widely used values:
| Value | Description | Visual Example |
|---|---|---|
decimal | Default numbers (1, 2, 3…) | 1. Item |
decimal-leading-zero | Numbers with leading zeros (01, 02…) | 01. Item |
lower-alpha | Lowercase letters (a, b, c…) | a. Item |
upper-alpha | Uppercase letters (A, B, C…) | A. Item |
lower-roman | Lowercase Roman numerals (i, ii, iii…) | i. Item |
upper-roman | Uppercase Roman numerals (I, II, III…) | I. Item |
none | No marker | Item |
Example:
ol.roman-list {
list-style-type: upper-roman;
}
❌ Removing Markers Completely
Sometimes, you may want a list without any markers—useful for navigation menus or custom designs.
ul.no-markers {
list-style-type: none;
}
✅ Quick Reference Table
| List Type | Common Values |
|---|---|
| Unordered | disc, circle, square, none |
| Ordered | decimal, decimal-leading-zero, lower-alpha,upper-alpha, lower-roman, upper-roman, none |
🧠 Pro Tip: Combine with list-style-position and list-style-image
To take full control of list styling, combine list-style-type with:
list-style-position– Controls whether the marker is inside or outside the list item.list-style-image– Replaces the default marker with a custom image.
🎯 Conclusion
The list-style-type property is a simple but powerful CSS tool for customizing how lists appear on your website. Whether you’re aiming for a classic look with bullets, a formal outline with Roman numerals, or a clean, minimalist design with no markers at all, this property gives you the flexibility to make your lists match your layout and brand.
Take a few minutes to experiment with different values—you’ll be surprised at how much polish it adds to your web pages.