The list-style-type property sets the marker of a list item — a bullet, number, letter, Roman numeral, custom string, or no marker.
It applies to elements with display: list-item (including <li>). The CSS initial value is disc. It is inherited. Pair it with list-style-position and list-style-image, or use the list-style shorthand.
Common markers (disc, decimal, none, and so on) are not deprecated. Some regional counter styles and string markers have uneven support.
In Safari, list-style-type: none can remove list semantics. Add role="list" on the <ul>/<ol> if it should still be announced as a list.
list-style-type: <counter-style> | <string> | none | initial | inherit;Everyday keywords include disc, circle, square, decimal, lower-roman, upper-alpha, and none.
| Value | Description | Try it |
|---|---|---|
disc | Filled circle. Common default for <ul> | Try it |
circle | Hollow circle | Try it |
square | Filled square | Try it |
decimal | Numbers starting at 1. Common default for <ol> | Try it |
upper-alpha | Uppercase letters: A, B, C… | Try it |
lower-roman | Lowercase Roman numerals: i, ii, iii… | Try it |
none | No marker. Common for navigation lists | Try it |
You can also use a string (for example "-"), initial, inherit, and many regional counter styles. See MDN for the full set.
list-style-typeSet the marker on the list (or on each li).
<ul> for bullets or <ol> for numbers.list-style-type to the marker you want.none for menus, then style spacing yourself if needed.list-style-type: inherit on the inner list if it should match the parent.| Goal | Typical value |
|---|---|
| Classic bullets | disc / circle / square |
| Numbered steps | decimal or upper-alpha |
| Nav / custom UI list | none |
The same three items. Change list-style-type and watch the markers update.
Each snippet shows only the list and list-style-type. Use Try It Yourself for a live editor.
Use filled circles on an unordered list.
<style>
ul {
list-style-type: disc;
}
</style>
<ul>
<li>Apollo</li>
<li>Hubble</li>
<li>Cassini</li>
</ul>ul, so every li gets the marker.disc draws a filled circle.currentColor.circle or square the same way.Letter markers on an ordered list.
<style>
ol {
list-style-type: upper-alpha;
}
</style>
<ol>
<li>Plan</li>
<li>Build</li>
<li>Ship</li>
</ol><ol>. Ordered lists are meant for sequences.decimal; this switches to A, B, C.lower-roman or upper-roman for i / I style markers.Hide markers for a navigation-style list.
<style>
ul {
list-style-type: none;
}
</style>
<ul role="list">
<li>Home</li>
<li>Docs</li>
<li>Blog</li>
</ul>none hides bullets and numbers.role="list" helps Safari still expose a list to assistive tech.list-style: none clears type, position, and image together.Most surprises come from inheritance, Safari, or nested lists.
Browsers style nested ul/ol again. Use list-style-type: inherit on the nested list to keep the parent marker.
none can drop list semantics in SafariAdd role="list" when you hide markers but still want a list in the accessibility tree.
If list-style-image is set, that image is used instead of the type marker when it loads.
list-item displayMarkers appear on list items. Changing an item to display: block removes the marker behavior.
Regional counter styles and string markers may not look right everywhere. Stick to common keywords for cross-browser UI.
list-style-type is a browser CSS property for list markers. Node.js, Deno, and Bun do not apply it.
Common marker keywords are supported in all modern browsers. Some regional styles and string values vary by browser and fonts.
Bottom line: Safe for everyday disc, decimal, alpha, roman, and none. Test specialty counter styles if you need them. It is not a runtime API.
disc for many uls, decimal for many ols.none, and consider role="list" in Safari.inherit if children should keep the parent marker.One line: list-style-type picks the marker — bullets, numbers, letters, or none.
Learn how to set outer spacing on all four sides of an element.
8 people found this page helpful