From W3C Wiki
Jump to: navigation, search


The list-style-type property specifies appearance of the list item marker if 'list-style-image' has the value 'none' or if the image pointed to by the URI cannot be displayed.


Values disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Initial value disc
Applies to elements with 'display: list-item'
Inherited Yes


For Unorderd List:

  • disc
    Filled circle marker (●).

  • circle
    Circle marker (○).

For Orderd List:

  • decimal
    Decimal numbers, beginning with 1.

  • decimal-leading-zero
    Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).

  • lower-roman
    Lowercase roman numerals (i, ii, iii, iv, v, etc.).

  • upper-roman
    Uppercase roman numerals (I, II, III, IV, V, etc.). [Example B]

  • lower-greek
    Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)

  • lower-latin
    Lowercase ascii letters (a, b, c, ... z).

  • upper-latin
    Uppercase ascii letters (A, B, C, ... Z).

  • armenian
    Traditional uppercase Armenian numbering.

  • georgian
    Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).

  • lower-alpha
    Lowercase ascii letters (a, b, c, ... z).

  • upper-alpha
    Uppercase ascii letters (A, B, C, ... Z).

  • none
    Specifies no marker

  • inherit
    Takes the same specified value as the property for the element's parent.


Example A


   list-style-type: square;


    <li>list-item 1</li>
    <li>list-item 2</li>
    <li>list-item 3</li>

Csslist2 list-style-type.png

Example B


   list-style-type: upper-roman;


    <li>list-item 1</li>
    <li>list-item 2</li>
    <li>list-item 3</li>

Csslist2 list-style-type2.png

CSS Reference

The CSS specification defines the list-style-type property in 12.5.1 Lists.