Markers are the bullets or numeric values on a list with items.
The list-style-type property defines the type of marker.
An unordered list (<ul>) and an ordered list (<ol>)
with different markers. The list-style-type defines circles and roman numerals respectively.
Unordered list
Ordered list
<p>Unordered list</p>
<ul style="list-style-type: circle">
<li>Vincent Van Gogh</li>
<li>Henri Matisse</li>
<li>Paul Guaguin</li>
</ul>
<p>Ordered list</p>
<ol style="list-style-type: upper-roman">
<li>Vincent Van Gogh</li>
<li>Henri Matisse</li>
<li>Paul Gauguin</li>
</ol>
list-style-type: value;
| Value | Description |
|---|---|
| disc | Default. A solid circular marker. |
| armenian | Traditional Armenian numbering |
| circle | Circle marker |
| cjk-ideographic | Ideographic numbers marker |
| decimal | Number marker |
| decimal-leading-zero | A number with leading zeros (01, 02, 03, etc.) |
| georgian | Traditional Georgian numbering |
| hebrew | Traditional Hebrew numbering |
| hiragana | Traditional Hiragana numbering |
| hiragana-iroha | Traditional Hiragana Iroha numbering |
| katakana | Traditional Katakana numbering marker |
| katakana-iroha | Traditional Katakana Iroha numbering |
| lower-alpha | Lower case alphanumeric letters (a, b, c, d, e, etc.) |
| lower-greek | Lower case greek characters |
| lower-latin | Lower case latin letters (a, b, c, d, e, etc.) |
| lower-roman | Lower case roman numerals (i, ii, iii, iv, v, etc.) |
| none | No marker |
| square | Square marker |
| upper-alpha | Upper case alphanumeric (A, B, C, D, E, etc.) |
| upper-greek | Upper case greek characters |
| upper-latin | Upper case latin characters (A, B, C, D, E, etc.) |
| upper-roman | Upper case roman numerals (I, II, III, IV, V, etc.) |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different list-style-type values.
<style>
.unordered-list-example {
list-style-type: square;
}
</style>
<ul class="unordered-list-example">
<li>Vincent Van Gogh</li>
<li>Henri Matisse</li>
<li>Paul Gauguin</li>
</ul>
Click the buttons to see the different list-style-type values.
<style>
.ordered-list-example {
list-style-type: lower-alpha;
}
</style>
<ol class="ordered-list-example">
<li>Vincent Van Gogh</li>
<li>Henri Matisse</li>
<li>Paul Gauguin</li>
</ol>
This table shows when list-style-type support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
