The list-style property is a shorthand for list-style-type, list-style-position, and list-style-image. It styles markers on list items (li and display: list-item).
Values can appear in any order. Omitted parts fall back to disc, outside, and none. It is inherited. Nested lists often reset the type unless you set inherit.
Not deprecated. Common keywords like disc, square, decimal, inside, outside, and none are safe. Some exotic counter styles vary by browser.
list-style: <type> || <position> || <image> | none | initial | inherit;Examples: list-style: square; · list-style: square inside; · list-style: none;
| Value | Description | Try it |
|---|---|---|
<type> | Marker kind such as disc, square, decimal | Try it |
inside / outside | Marker position relative to the text | Try it |
none | No marker | Try it |
square inside | Type and position together | Try it |
initial | Resets to the initial shorthand defaults | Try it |
inherit | Inherits from the parent (useful for nested lists) | Try it |
list-styleStyle the list once; markers follow on each item.
ul or ol (or set display: list-item on custom items).list-style to a type, optionally plus inside/outside.none for custom menus, then style with padding and icons if needed.list-style: inherit when you want the same marker type.| Piece | Required? | Role |
|---|---|---|
| Type | Optional | Defaults to disc if omitted |
| Position | Optional | Defaults to outside |
| Image | Optional | Defaults to none; type is the fallback if the image fails |
none | When hiding markers | Removes the list marker |
Only the list-style shorthand changes on the sample list.
Each snippet focuses on the list-style shorthand. Use Try It Yourself for a live editor.
Set only the type with one value.
<style>
ul {
list-style: square;
}
</style>
<ul>
<li>Apollo</li>
<li>Hubble</li>
</ul>ul apply to its list items.square sets list-style-type; position stays outside.disc, circle, or decimal the same way.Place the marker inside the content box.
<style>
ul {
list-style: square inside;
}
</style>
<ul>
<li>Short item</li>
<li>A longer item that wraps under the marker when space is tight.</li>
</ul>inside puts the marker in the content area.Hide bullets for a custom list or menu.
<style>
ul {
list-style: none;
padding-left: 0;
}
</style>
<ul role="list">
<li>Home</li>
<li>Docs</li>
</ul>list-style: none removes the bullet or number.padding-left: 0 aligns the text.role="list" helps Safari announce the list when markers are none.Markers look simple until nesting or accessibility gets involved.
Browsers set default types on nested ul/ol. Use list-style: inherit on nested lists to keep your custom marker.
none and Safari VoiceOverSafari may not expose a list with list-style: none as a list. Add role="list" when that matters.
If list-style-image fails to load, the type marker still shows. Keep a sensible type when you use an image.
square inside and inside square both work. The browser maps each token to the matching longhand.
Markers apply to list items. A plain div needs display: list-item to show them.
list-style is a browser CSS shorthand for list markers. Node.js, Deno, and Bun do not apply it.
Common types, inside/outside, none, and images are widely supported. Some specialized counter styles vary by browser.
Bottom line: Safe for everyday list styling. Prefer standard types for study. It is not a runtime API.
disc / outside / none.role="list" for Safari.inherit if you want the same type.One line: list-style is the quick way to set list markers — type, position, and optional image in one go.
Learn how to use a custom image as a list marker.
8 people found this page helpful