CSS list-style-typeProperty
Example
Set some different list styles:
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
Try it Yourself »
More examples at the bottom of this page.
Property definitions and usage instructions
The list-style-type property sets the type of list-item marker.
| Default value: | "disc" for <ul> and "decimal" for <ol> |
|---|---|
| Inherited: | yes |
| version: | CSS1 |
| JavaScript Syntax: | object.style.listStyleType="square" |
Browser Support
The numbers in the table indicate the first browser version number that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| list-style-type | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Property value
| Value | Description |
|---|---|
| none | Unmarked. |
| disc | Default. The marker is a solid circle. |
| circle | The marker is a hollow circle. |
| square | The marker is a solid square. |
| decimal | The marker is a number. |
| decimal-leading-zero | Number markers starting with 0. (01, 02, 03, etc.) |
| lower-roman | Lowercase Roman numerals (i, ii, iii, iv, v, etc.) |
| upper-roman | Uppercase Roman numerals (I, II, III, IV, V, etc.) |
| lower-alpha | Lowercase English letters: The marker is lower-alpha (a, b, c, d, e, etc.) |
| upper-alpha | Uppercase English letters: The marker is upper-alpha (A, B, C, D, E, etc.) |
| lower-greek | Lowercase Greek letters (alpha, beta, gamma, etc.) |
| lower-latin | Lowercase Latin letters (a, b, c, d, e, etc.) |
| upper-latin | Uppercase Latin letters (A, B, C, D, E, etc.) |
| hebrew | Traditional Hebrew numbering |
| armenian | Traditional Armenian numbering |
| georgian | Traditional Georgian numbering (an, ban, gan, etc.) |
| cjk-ideographic | Simple ideographic numerals |
| hiragana | The markers are: a, i, u, e, o, ka, ki, etc. (Japanese hiragana characters) |
| katakana | The markers are: A, I, U, E, O, KA, KI, etc. (Japanese katakana characters) |
| hiragana-iroha | The markers are: i, ro, ha, ni, ho, he, to, etc. (Japanese hiragana ordinal numbers) |
| katakana-iroha | The markers are: I, RO, HA, NI, HO, HE, TO, etc. (Japanese katakana ordinal numbers) |
More Examples
List of all different list item markers.
This example demonstrates all the different list-item markers.
Related Articles
CSS Tutorial:CSS Lists
CSS Reference Manual:list-style property
other extensions