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:
- This is the first item.
- This is the second item.
- 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 PlaygroundBrowser 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.
