CSS list-style-type Property

Description

The list-style-type property changes the appearance of the marker for each item in the list. This property is used only when the value of list-style-image is set to none. Markers differ for a bulleted list ( <ul> element) and a numbered list ( <ol> element).

Initial value
disc
Applies to
List item elements
Inherited
Yes
Computed value
Specified value
Animatable
No
JavaScript syntax
object.style.listStyleType

Interactive Demo

  • Australia
  • New Zealand
  • United States
  • United Kingdom
  • India

Syntax

list-style-type: <counter-style> | <string> | none

Values

  • discfilled circle.
  • circlecircle
  • squaresquare
  • decimalnumber. This is default for
    1. decimal-leading-zeronumber with leading zeros (01, 02, 03, etc.)
    2. lower-romanlower-roman (i, ii, iii, iv, v, etc.)
    3. upper-romanupper-roman (I, II, III, IV, V, etc.)
    4. lower-greeklower-greek
    5. lower-alphalower-alpha (a, b, c, d, e, etc.)
    6. lower-latinlower-latin (a, b, c, d, e, etc.)
    7. upper-alphaupper-alpha (A, B, C, D, E, etc.)
    8. upper-latinupper-latin (A, B, C, D, E, etc.)
    9. armenianThe marker is traditional Armenian numbering
    10. georgianTraditional Georgian numbering
    11. noneNo marker is shown
    12. inherit

Example

<ul>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ul>
<ol class="test">
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ol>
<ul class="test2">
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ul>
.test {
   list-style-type: lower-roman;
   color: orange;
}
.test2 {
   list-style-type : circle; 
   color: IndianRed;
}

Browser Support

The following table will show you the current browser support for the CSS list-style-type property.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 2nd January 2024