The list-style-type property defines the visual marker for each list item.
| Value | Description |
|---|---|
| disc / circle / square | Unordered (ul) |
| decimal | Numbers (1, 2, 3) |
| upper-roman | Roman (I, II, III) |
| none | Removes markers |
ul { list-style-type: square; }
Controls if the bullet sits inside the content flow or hangs outside in the margin.
ul { list-style-position: inside; }
Outside (Default): Bullet is in the margin.
Inside: Bullet acts like part of the text line.
POSITION: INSIDE
POSITION: OUTSIDE
You can replace standard bullets with custom icons or images using url().
ul { list-style-image: url('star.png'); }
💡 Tip: Ensure your image is very small (e.g., 16x16px) for the best look.
(Simulated with Emojis for demo)
Space inside the list (between border and items).
ul { padding: 30px; }
Space outside the list (separating it from other elements).
ul { margin: 40px; }