List Style Shorthand Property
Last updated: 2026-09-13
list-style List Style Shorthand Property
list-style is the shorthand for list-style-type, list-style-position, and list-style-image, setting every aspect of list item markers at once. The default is disc outside none. It is the most efficient way to control list appearance, commonly used to quickly customize or reset list styles.
| Category | |
|---|---|
| Initial Value | disc outside none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
list-style: <list-style-type> || <list-style-position> || <list-style-image>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<list-style-type> || <list-style-position> || <list-style-image> | Value | List style shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： list-style: none is commonly used in navigation bars and similar places to remove the default list markers.
Tip： Unspecified sub-properties in the shorthand fall back to their defaults, so list-style: none clears both type and image.
❓ FAQ
QWhat is the difference between list-style: none and display: block?
Alist-style: none only removes the marker in front of each item; the li remains a list item with its semantics intact, and screen readers still recognize the list. display: block changes the element to block-level rendering, which can affect semantics and how assistive technology understands the list structure. To reset list appearance, list-style: none is enough — no need to change display.
QDoes the value order in the list-style shorthand matter?
AThere is no strict order — browsers distinguish values by type — but the recommended order is type, position, image, e.g. list-style: square inside none;. Note that unspecified sub-properties are reset to their defaults, so list-style: none clears both type and image.
QWhat is the difference between list-style: none and padding-left: 0?
Alist-style: none only removes the marker symbols; the browser's default left indent (roughly 40px of padding) remains. To align a list flush with surrounding text, combine list-style: none; padding-left: 0; margin: 0;. This is the classic reset trio — horizontal nav menus remove the dots and indent this way.
QWhich sub-properties does the list-style shorthand reset?
AAny sub-property you omit is reset to its default: type to disc, position to outside, and image to none. So if you set an image with list-style-image first and later write list-style: inside;, the image is cleared. When you only want to change one sub-property, use its longhand directly to stay safe.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
list-style-type Property
Set the list marker type
list-style-position Property
Set the marker position
