CSS / Reference / list-style-type: Change List Markers and Numbering

list-style-type sets a list marker’s shape or numbering style. Styling does not change the meaning of ul and ol: use an ordered list when order matters, then choose its visual numbering.

Syntax and value choices

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

ol { list-style-type: lower-roman; }
ul { list-style-type: square; }

For supported values and conditions, see MDN list-style-type.

Run the example and compare results

Save this complete code as css-reference-10537-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>list-style-type comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target { list-style-type: lower-roman; padding-inline-start: 2em; }
.reference { list-style-type: square; padding-inline-start: 2em; }
</style>
</head>
<body>
<main id="demo">
<h1>list-style-type comparison</h1>
<section class="samples"><div><p class="label">ol: lower-roman</p><ol class="target"><li>First step</li><li>Second step</li></ol></div><div><p class="label">ul: square</p><ul class="reference"><li>First item</li><li>Second item</li></ul></div></section>
</main>
</body>
</html>

The ordered list shows i and ii; the unordered list uses squares. HTML start values remain part of the ordered list’s numbering behavior.

Marker generation and the shorthand

The property affects markers on list-item boxes. A working list-style-image can take visual precedence. A later list-style shorthand resets type, position, and image together, so inspect the final rules.

Removing markers while keeping meaning

none hides the marker rather than changing the HTML element. Some browser and assistive-technology combinations handle markerless lists differently, so check meaningful navigation structures. Typing manual numbers into text separates the numbering from the list semantics.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

1. Change only ol.target’s list-style-type among decimal, lower-roman, and none. The item order stays the same; restore lower-roman.
2. Add start="3" to that ol start tag to begin with iii and iv, then remove it. Distinguish visual numbering style from a changed starting number.

For combining marker placement with paragraph and list layout, see CSS Paragraph and List Styling.

For styling the marker itself, see MDN ::marker.

For display modes and normal flow, see CSS display: Block, Inline, inline-block, and Hiding. Related properties to compare alongside these conditions are list-style-position.

When the result is missing or unexpected

• Inspect display, list-style-image, and clipping if the marker is absent.
• Choose ul or ol by meaning before choosing a marker shape.