List Marker Type Property
Last updated: 2026-09-13
list-style-type List Marker Type Property
list-style-type sets the marker in front of list items, such as a filled dot, hollow circle, number, or Roman numeral. The default is disc. It supports many predefined markers and custom strings, making it the most commonly used property for controlling a list's visual appearance.
| Category | |
|---|---|
| Initial Value | disc |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
list-style-type: none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | <string>;⚙️ Values
| Value | Type | Description |
|---|---|---|
disc | circle | square | decimal | none | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | Keyword | List marker types |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style-type | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： list-style-type: none removes the marker entirely, commonly used for horizontal navigation menus.
Warning： Some marker types (such as georgian and armenian) may render inconsistently across browsers.
❓ FAQ
QWhat is the difference between disc, circle, and square?
Adisc is a filled dot (the default for unordered lists), circle is a hollow circle, and square is a filled square. All three are used in <ul> lists and render slightly differently across browsers. disc is the most common, circle looks lighter, and square suits emphasized lists. If the current font lacks the glyph, the browser falls back to disc.
QHow do I customize list markers with emoji or icons?
ATwo ways: use a string value directly, list-style-type: "→ "; (supported by modern browsers, emoji included), or the more flexible approach: list-style: none plus li::before inserting content: "✔", controlling color, size, and spacing with CSS. The second is recommended for its control and consistent cross-browser behavior.
QWhat are the common numeric marker values?
Adecimal (1, 2, 3), decimal-leading-zero (01, 02), lower-roman/upper-roman, lower-alpha/upper-alpha, georgian, and armenian. Chinese projects commonly use decimal and lower-alpha; tables of contents often use upper-roman.
QDoes the list semantics remain after list-style-type: none?
AYes. list-style-type: none only removes the visible marker; the listitem semantics of <li> are preserved, and screen readers still recognize the list structure. Switch to another element only when the content is no longer a list. Removing markers for nav menus should never cost you the semantics.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
list-style Property
The shorthand for list styles
list-style-image Property
Use an image as the list marker
