CSS Reference Property

list-style-type

The list-style-type property is used to determine the type—or appearance—of bullets (markers) added to list items in lists.

It also defines the appearance of elements displayed as list items using display: list-item (See display).

The list-style-type sets the appearance of list markers if the value of list-style-image—which can be used to set an image as a marker—is none or if the image it points to cannot be displayed.

A list marker can have one of three types: glyphs (circle, disc, square), numbering systems, and alphabetic systems.

The color of the marker is the same as the computed color of the list item is. The computed color of the item is determined from the value of the color property.

A marker can be set using a set of predefined keywords (see Values section below), or using a custom string value. Custom values were introduced in CSS3 and are set using the ::marker pseudo-element. Custom marker values are not yet supported in any browser.

Trivia and Notes

Some list style types require using a suitable font to be displayed properly.

Official Syntax

  • Syntax:

    list-style-type: 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: disc
  • Applies To: elements with display: list-item
  • Animatable: no

Notes

The new syntax in CSS3 looks like the following: list-style-type: <string> | <counter-style> | none, where the string value is the value specified using the ::marker pseudo-element.

Values

The following is a list of all standard values. See the Demo section below for a live example of how each value looks like.

Glyph values include the following:

disc
Creates a marker that looks like a disc. That is, a filled circle.
circle
Creates a marker that looks like a hollow circle.
square
Creates a marker that looks like a filled square.

Numeric systems include the following values:

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.).
georgian
Traditional Georgian numbering (an, ban, gan, …, he, tan, in, in-an, …).
armenian
Traditional uppercase Armenian numbering.

Alphabetic systems include the following values:

lower-latin or lower-alpha
Lowercase ascii letters (a, b, c, … z).
upper-latin or upper-alpha
Uppercase ascii letters (A, B, C, … Z).
lower-greek
Lowercase classical Greek alpha, beta, gamma, … (?, ?, ?, …)

Other values:

none
The marker is empty.
inherit
The item inherits its marker type from its parent.

Notes

There is also a list of experimental values and a non-standard list of values provided by browser vendors to support list types in other languages. You can read more about these values and see examples of each in the MDN entry.

Experimental values added in CSS3 are currently only supported in Firefox with the -moz- prefix. These values include: hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal, korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, and ethiopic.

The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, lower-latin rendering is undefined. Firefox and other browsers will continue as AA, AB, AC,..etc. Therefore, for long lists, it is recommended that authors specify true numbers.

Examples

Suppose you have an unordered list of items in your source document:

<ol>
    <li>This is the first item.</li>
    <li>This is the second item.</li>
    <li>This is the third item.</li>
</ol>
                

The following will set the markers for the list items to lower roman numbers:

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

The above code will produce something similar to this:

  1. This is the first item.
  2. This is the second item.
  3. This is the third item.

Note that the list marker alignment (left or right) depends on the browser.

Live Demo

The following demo shows the result of using the above values to style the markers of list items.

View this demo on the Codrops Playground

Browser Support

The basic values: inherit, none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman are supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 4+ and on Android and iOS.

The values lower-latin, upper-latin, lower-greek, armenian, georgian, decimal-leading-zero are also supported in all major browsers, but support in Internet Explorer starts from version 8.

Written by

Last updated February 3, 2015 at 12:34 pm by Pedro Botelho

Do you have a suggestion, question or want to contribute? Submit an issue.