list-style-type: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The list-style-type property sets the type of the list item marker.

This property can apply to the UL, OL, and LI element.


ul {
list-style-type: square;
}

ol {
list-style-type: upper-alpha;
}

Property Value Example
list-style-type CSS1
none
  • First list item
  • Second list item
  • Third list item
disc
  • First list item
  • Second list item
  • Third list item
circle
  • First list item
  • Second list item
  • Third list item
square
  • First list item
  • Second list item
  • Third list item
decimal
  1. First list item
  2. Second list item
  3. Third list item
upper-alpha
  1. First list item
  2. Second list item
  3. Third list item
lower-alpha
  1. First list item
  2. Second list item
  3. Third list item
upper-roman
  1. First list item
  2. Second list item
  3. Third list item
lower-roman
  1. First list item
  2. Second list item
  3. Third list item
CSS2
decimal-leading-zero
  1. First list item
  2. Second list item
  3. Third list item
lower-greek
  1. First list item
  2. Second list item
  3. Third list item
upper-latin
  1. First list item
  2. Second list item
  3. Third list item
lower-latin
  1. First list item
  2. Second list item
  3. Third list item
hebrew
  1. First list item
  2. Second list item
  3. Third list item
armenian
  1. First list item
  2. Second list item
  3. Third list item
georgian
  1. First list item
  2. Second list item
  3. Third list item
cjk-ideographic
  1. First list item
  2. Second list item
  3. Third list item
hiragana
  1. First list item
  2. Second list item
  3. Third list item
katakana
  1. First list item
  2. Second list item
  3. Third list item
hiragana-iroha
  1. First list item
  2. Second list item
  3. Third list item
katakana-iroha
  1. First list item
  2. Second list item
  3. Third list item

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

ul { list-style-type: square; }
ol { list-style-type: upper-alpha; }

</style>

</head>
<body>

<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>

<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>

</body>
</html>

Output
  • First list item
  • Second list item
  • Third list item
  1. First list item
  2. Second list item
  3. Third list item