list-style-type (CSS property)

Spec
Inherited Initial Version
Yes disc CSS1, 2
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

list-style-type: { circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit } ;

Description

This property specifies the type of list marker for an item in a list—an element whose display property has the value list-item.

The list style type only applies if list-style-image is set to none, or to a URI that can’t be displayed.

List markers can either be glyphs (that is, bullets), or comprise a numeric or alphabetic numbering system. The CSS2.1 specification doesn’t define how alphabetic numbering wraps at the end of the alphabet sequence.

The color of the list markers is the same as the computed value of the color property for the list items.

The exact position of the list marker can’t be specified beyond the styling allowed by the list-style-position property.

Example

This style rule applies roman numerals as the numbering scheme to items in an ordered list:

ol li {
  list-style-type: upper-roman;
}

Value

The values circle, disc, and square generate glyphs as list markers. The exact appearance of these glyphs isn’t defined by the CSS2.1 specification, but is left to the user agent.

Numeric numbering systems include:

  • armenian: traditional Armenian numbering
  • decimal: decimal numbers (1, 2, 3, …)
  • decimal-leading-zero: decimal numbers where values less than ten are padded by an initial zero (01, 02, 03, …)
  • georgian: traditional Georgian numbering
  • lower-roman: lowercase roman numerals (i, ii, iii, …)
  • upper-roman: uppercase roman numerals (I, II, III, …)

Alphabetic numbering systems:

  • lower-greek: lowercase Greek letters
  • lower-latin or lower-alpha: lowercase Latin letters (a, b, c, …)
  • upper-latin or upper-alpha: uppercase Latin letters (A, B, C, …)

Note that the following values present in CSS2 have been removed in CSS2.1:hiragana, katakana, hiragana-iroha, katakana-iroha and cjk-ideographic.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 7 don’t support the values armenian, decimal-leading-zero, georgian, or lower-greek. Nor do they support the values lower-latin or upper-latin, although they do support the alternative forms lower-alpha and upper-alpha.

Internet Explorer for Windows versions up to and including 7 will not increment the list markers in numbering systems if the list item has haslayout. The list markers may also be misplaced along with various other bugs (for a good summary of these bugs visit Bruno Fassino’s site).

Internet Explorer for Windows versions up to and including 7 and under will not show the list marker if the list element is floated (there is no fix for this).

Internet Explorer for Windows versions up to and including 7 will not increment the list markers in numbering systems if the list item has haslayout. The list markers may also be misplaced along with various other bugs (for a good summary of these bugs visit Bruno Fassino’s site).

In Internet Explorer for Windows version 8 disclist markers aren’t rendered correctly when using "MS Sans Serif" as the markers are rendered as vertical bars ( Microsoft Connect Bug report ).

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

User-contributed notes

ID:
#3
Contributed:
by Paul O'B
Date:
Mon, 12 May 2008 11:45:55 GMT

IE7 and under will not show the list marker if the list element is floated. There is no real cure for this.

ID:
#1
Contributed:
by mattymcg
Date:
Wed, 19 Mar 2008 05:42:27 GMT

I have to say, finding the values for styling different bullet points (disc, circle, square) on this page was tough, given they are only mentioned as part of a sentence. I was expecting to see a table where I could see at a glance what the options were...

Related Products