list-style-type

list-style-type chooses a list item’s marker when no usable list-style-image replaces it. Marker appearance does not decide whether the list’s order is meaningful.

Compare circle and square bullets

Both lists have identical unordered content; only their marker shapes differ.

<ul class="circle">
  <li>Read the smallest working document.</li>
  <li>Change one value and compare the result.</li>
  <li>Explain the difference before adding more styles.</li>
</ul>
<ul class="square">
  <li>Read the smallest working document.</li>
  <li>Change one value and compare the result.</li>
  <li>Explain the difference before adding more styles.</li>
</ul>

li {
  margin-block: 0.5rem;
}
.circle {
  list-style-type: circle;
}
.square {
  list-style-type: square;
}

Continue an ordered list with letters

The HTML start value determines the ordinal. CSS lower-alpha paints that ordinal as a letter, so start=3 begins at c.

<ol start="3">
  <li>Read the smallest working document.</li>
  <li>Change one value and compare the result.</li>
  <li>Explain the difference before adding more styles.</li>
</ol>

ol {
  list-style-type: lower-alpha;
}
li {
  margin-block: 0.5rem;
}

Values and defaults

The initial value is disc and the property is inherited. Browser defaults set common ul/ol styles separately. Familiar values include disc, circle, square, decimal, decimal-leading-zero, lower-alpha, upper-roman, and none. Custom @counter-style names, symbols(), and literal strings have value-specific support.

Common mistakes

Changing an ol to disc does not turn it into a semantic ul. List-style-image takes precedence when its image is usable. Set this on an actual list-item box or inherit it from the list. A later list-style shorthand can reset it. Use start, reversed, or li value for meaningful HTML numbering rather than changing essential order only through generated CSS.

Learn list-style-image, list-style, and li.

Sources and browser support

MDN: list-style-type describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.