list-style
The look of list markers: their type, position and image.
Syntax
list-style: type position image;Values
| Parameter | Type | Description |
|---|---|---|
| disc | circle | square | keyword | Bullet shapes for `<ul>`. |
| decimal | upper-roman | keyword | Numbering styles for `<ol>`; there are also `lower-alpha`, `lower-roman` and others. |
| none | keyword | No markers. |
| inside | outside | keyword | The marker inside the text block or outside it (the default). |
Examples
Different marker types:
<ul style="list-style: square;"><li>Square</li><li>Bullets</li></ul>
<ol style="list-style: upper-roman;"><li>Roman</li><li>Numbers</li></ol>A list turned into a horizontal menu:
<style>
.menu { list-style: none; padding: 0; display: flex; gap: 12px; }
</style>
<ul class="menu"><li>Home</li><li>Blog</li><li>Contacts</li></ul>Notes
list-style: none removes the markers, but the left padding of the list stays — reset it with padding: 0. In Safari a list without markers may stop being announced as a list; adding role="list" restores that.
See also
- ::marker — The bullet or number of a list item.
- <ul> — A bulleted list: items whose order does not matter.
- padding — The inner spacing between the content and the border of an element.
- counter-reset — `counter-reset` creates a CSS counter (or resets it), `counter-increment` increases it on each matching element; the value is printed with `counter()`.
Related recipes
In the tutorial
- Styling lists and tables — Marker types and list-style, custom markers with ::marker, a menu from a list without bullets, and table borders, padding, alignment, zebra stripes and the caption.