CSS list-style-type Property

Markers are the bullets or numeric values on a list with items.

The list-style-type property defines the type of marker.

Example

#

An unordered list (<ul>) and an ordered list (<ol>) with different markers. The list-style-type defines circles and roman numerals respectively.

Unordered list

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Guaguin

Ordered list

  1. Vincent Van Gogh
  2. Henri Matisse
  3. Paul Gauguin
<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>

Syntax

list-style-type: value;

Values

#

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.

More Examples

Unordered list

Click the buttons to see the different list-style-type values.

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Gauguin
<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>

Ordered list

Click the buttons to see the different list-style-type values.

  1. Vincent Van Gogh
  2. Henri Matisse
  3. Paul Gauguin
<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>

Browser support

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

You may also like

Guides