CSS Property list-style-type

list-style-type sets the type of marker system of a list.


Initial value disc
Inherited Yes.
Version CSS1
JavaScript syntax object.style.listStyleType="square"
Applies to Elements whose display value is list-item.

CSS Syntax

list-style-type: disc | 
                 circle | 
                 square | 
                 decimal | 
                 decimal-leading-zero |   
                 lower-roman | 
                 upper-roman | 
                 lower-greek | 
                 lower-latin |   
                 upper-latin | 
                 armenian | 
                 georgian | 
                 lower-alpha |   
                 upper-alpha | 
                 none | 

Property Values

The property values are listed in the following table.

Value Description
circle a circle
decimal a number. This is default for
    decimal-leading-zero a number with leading zeros (01, 02, 03, etc.)
    disc a filled circle. This is default for
      georgian Georgian numbering
      lower-alpha lower-alpha (a, b, c, d, e, etc.)
      lower-greek lower-greek
      lower-latin lower-latin (a, b, c, d, e, etc.)
      lower-roman lower-roman (i, ii, iii, iv, v, etc.)
      none No marker
      square a square
      upper-alpha upper-alpha (A, B, C, D, E, etc.)
      upper-latin upper-latin (A, B, C, D, E, etc.)
      upper-roman upper-roman (I, II, III, IV, V, etc.)
      inherit Inherit the listStyleType property from parent element

      Browser compatibility

      list-style-type Yes Yes Yes Yes Yes


      An example showing how to use list-style-type CSS property.

                  ol {<!--   w ww.  ja va2  s .  c  o  m-->
                      font-family: sans-serif;
                      list-style-type: upper-greek;
                  <li>This is the first list item.</li>
                  <li>This is the second list item.</li>
                  <li>This is the third list item.</li>
                  <li>This is the fourth list item.</li>
                  <li>This is the fifth list item.</li>

      Click to view the demo

      Example 2

      <!DOCTYPE HTML> 
              ol { <!--from w  w  w.  j a  v a  2  s  . c  o  m-->
                  list-style-type: lower-alpha; 
          This is a test: 

      Click to view the demo