Value	Description
armenian	The marker is traditional Armenian numbering
circle	The marker is a circle
cjk-ideographic	The marker is plain ideographic numbers
decimal	The marker is a number. This is default for <ol>
decimal-leading-zero	The marker is a number with leading zeros (01, 02, 03, etc.)
disc	The marker is a filled circle. This is default for <ul>
georgian	The marker is traditional Georgian numbering
hebrew	The marker is traditional Hebrew numbering
hiragana	The marker is traditional Hiragana numbering
hiragana-iroha	The marker is traditional Hiragana iroha numbering
inherit	The value of the listStyleType property is inherited from parent element
katakana	The marker is traditional Katakana numbering
katakana-iroha	The marker is traditional Katakana iroha numbering
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The marker is lower-greek
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
none	No marker is shown
square	The marker is a square
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)

Browser Support

The listStyleType property is supported in all major browsers.

Note: IE9 and Opera 11 do not support: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

Note: IE8 supports the property values: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, and inherit only if a DOCTYPE is specified!

Example

Change the list-item marker type:

<html>
<head>
<script>
function displayResult()
{
document.getElementById("ul1").style.listStyleType="square";
}
</script>
</head>
<body>

<ul id="ul1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Water</li>
  <li>Soda</li>
</ul>
<br>
<button type="button" onclick="displayResult()">Change list-item marker type</button>

</body>
</html>

Try it yourself »